Javascript 如何在react styleguidist中添加具有依赖项的组件示例

我想使用'react styleguidist'在其中记录一个

按钮组

组件呈现

按钮

组件

我有一个styleguidist网页包配置，如下所示：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map'
}

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

我知道我不需要定义常用的加载程序和插件，因为styleguidist已经在内部添加了它们

在

src/components/

中，允许

styleguidist

拾取我的组件的目录结构看起来有点像这样：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map'
}

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

案例一

在我的

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

案例二

我已尝试将信息封装在

example.js

中

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

这会引发错误：

TypeError: require(...) is not a function

我知道我不需要定义常用的加载程序和插件，因为styleguidist已经在内部添加了它们

事实并非如此。Styleguidist不会向代码中添加任何加载程序

SyntaxError：相邻的JSX元素必须包装在一个封闭标记中（5:2）

很可能在

之后需要一个分号。而且您可能不需要
按钮
组件。这取决于样式指南的配置以及是否要在样式指南中显示
按钮
组件

如果要在样式指南中显示这两个组件，请将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;

案例二

我不知道你想在这里做什么
 除去require帮助，样式指南中的组件可以相互引用是很好的。谢谢，关于配置，我的意思是，与可能需要完全控制模式的storybook不同，storybook不提供这样的选项