问题
I would like to document a ButtonGroup
component rendering Button
components within it using `react-styleguidist'.
I have a styleguidist webpack config which looks like this:
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader'
}
],
exclude: /node_modules/
}
]
},
devtool: 'cheap-module-eval-source-map'
}
I know that I dont need to define commonly used loaders and plugins because styleguidist already adds them internally
Inside the src/components/
, the directory structure for allowing styleguidist
to pick up my components looks a little like this:
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
within the ButtonGroup
directory:
```jsx
const Button = require('../index')
<ButtonGroup>
<Button type='primary' size='lg'>Hello, World</Button>
<Button type='primary' size='lg'>Hello, Doctor</Button>
</ButtonGroup>
```
When I do that, my styleguide
has an error that says:
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (5:2)
Case II
I have tried enclosing the information in an example.js
inside ButtonGroup
directory as illustrated above, the file contains:
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>
)
}
Now the example component is imported into the Readme.md
:
```jsx
const Example = require('./example')
(<Example />)
```
which throws the error:
TypeError: require(...) is not a function
回答1:
I know that I dont need to define commonly used loaders and plugins because styleguidist already adds them internally
This is not true. Styleguidist doesn’t add any loaders to your code.
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (5:2)
Most likely you need a semicolon after ;
. And probably you don’t need to require a Button
component. It depends on your style guide config and whether you want to show your Button
component in a style guide.
If you want to show both components in a style guide, point Styleguidist to all you components: components: 'src/components/**/index.js'
.
If you want to hide some components from a style guide but be able to use them in examples, enable skipComponentsWithoutExample
option an use require
option to load your components:
// styleguide.config.js
module.exports = {
skipComponentsWithoutExample: true,
require: [
path.resolve(__dirname, 'styleguide/setup.js')
]
}
// styleguide/setup.js
import Buttom from './src/components/Button';
global.Button = Button;
Case II
I’m not sure what you’re trying to do here.
来源:https://stackoverflow.com/questions/46067207/how-to-add-examples-a-component-with-dependencies-in-react-styleguidist