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

Question

我想使用 `react-styleguidist' 记录一个 ButtonGroup 组件渲染 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 

案例一

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

案例二

我已尝试将信息封装在 ButtonGroup 目录内的 example.js 中，如上图所示，该文件包含:

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

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