我想记录一个ButtonGroup
组件渲染Button
其中使用“react-styleguidist”的组件。
我有一个 styleguidist webpack 配置,如下所示:
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader'
}
],
exclude: /node_modules/
}
]
},
devtool: 'cheap-module-eval-source-map'
}
我知道我不需要定义常用的加载器和插件,因为 styleguidist 已经在内部添加了它们
在 - 的里面src/components/
,允许的目录结构styleguidist
拿起我的组件看起来有点像这样:
Button
index.js
Readme.md
ButtonGroup
index.js
example.js (created for Case II after Case I failed)
Readme.md
Case I
In my Readme.md
内ButtonGroup
目录:
```jsx
const Button = require('../index')
<ButtonGroup>
<Button type='primary' size='lg'>Hello, World</Button>
<Button type='primary' size='lg'>Hello, Doctor</Button>
</ButtonGroup>
```
当我这样做时,我的styleguide
有一个错误说:
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (5:2)
Case II
我尝试将信息包含在example.js
inside ButtonGroup
目录如上图所示,文件包含:
import React from 'react'
const ButtonGroup = require('./index')
const Button = require('../index')
export default function ButtonGroupExample (props) {
return (
<ButtonGroup>
<Button>Hello, World</Button>
<Button>Hello, Doctor</Button>
</ButtonGroup>
)
}
现在示例组件已导入到Readme.md
:
```jsx
const Example = require('./example')
(<Example />)
```
这会引发错误:
TypeError: require(...) is not a function