如何在react-styleguidist中添加具有依赖关系的组件示例

Question

我想使用`react-styleguidist'来编写一个ButtonGroup组件，它将使用`react-styleguidist'渲染Button组件。

我有一个styleguidist的WebPack配置看起来像这样：

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

的src/components/内，允许styleguidist拿起我的组件的目录结构看起来有点像这样：

Button 
    index.js 
    Readme.md 
    ButtonGroup 
    index.js 
    example.js (created for Case II after Case I failed) 
    Readme.md 

例I

在我的ButtonGroup目录内Readme.md：

```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) 

案例二

我试图封闭example.js的信息在ButtonGroup目录里面如上所示，文件con含有杂质：

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 

Answer 1

I know that I dont need to define commonly used loaders and plugins because styleguidist already adds them internally

这是不正确的。 Styleguidist不会将任何加载器添加到您的代码中。

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (5:2)

最可能在;之后需要分号。也许你不需要一个Button组件。这取决于你的风格指南配置，以及是否要在风格指南中显示你的Button组件。

如果要在样式指南中显示这两个组件，请将Styleguidist指向所有组件：components: 'src/components/**/index.js'。

如果你想隐藏风格指南的一些部件，但能够在例子中使用它们，使skipComponentsWithoutExample选项的使用require选项装载组件：

// 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

我不是确定你想在这里做什么。