javascript - 在 React Styleguidist 文档中不能使用其他组件作为子组件

Question

我正在使用 React Styleguidist（8.0.6 版）来记录 React 组件。我有一个这样的目录结构：

Card
- Card.js
- Card.md
ActionItems
- ActionItems.js
- ActionItems.md

这两个组件中的每一个都在其自己的 Styleguidist 生成的页面上正确呈现。

但是在中Card.md，我希望我的 Card 示例之一包含一个<ActionItems/>子组件，如下所示：

<Card>
    <ActionItems/>
</Card>

我发现其他人做这样的事情的唯一例子是这个堆栈溢出帖子。

如果我将以下内容放入我的Card.md：

```jsx
<Card someAttr="foo">
    <ActionItems someOtherAttr="bar"/>
</Card>
```

Styleguidist 使用SyntaxError: Expected corresponding JSX closing tag for <React.Fragment>.

根据我之前链接的堆栈溢出文章，我尝试了这个

```jsx
const ActionItems = require('../ActionItems/ActionItems.js');

<Card someAttr="foo">
    <ActionItems someOtherAttr="bar"/>
</Card>
```

但是 Styleguidist 然后给了我一个不同的错误：Adjacent JSX elements must be wrapped in an enclosing tag.

谁能帮我弄清楚我做错了什么？还是 Styleguidist 只是不允许你做我想做的事？

如果它是相关的，如果我将 require 路径更改为其他任何内容，例如'/www/javascript/ActionItems/ActionItems.jsStyleguidist 失败并显示以下消息

Failed to compile
Module not found: Can't resolve '/www/javascript/ActionItems/ActionItems.js' in '/www/javascript/react-components/Card'

0 回答 0