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

Question

我想用“rendering styleguidist”来记录一个ButtonGroup组件，在其中呈现Button组件。

我有一个设计师webpack的配置，看起来如下：

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

我知道我不需要定义常用的加载器和插件，因为样式主义者已经在内部添加了它们

在src/components/中，允许styleguidist获取组件的目录结构看起来有点像这样：

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

案件I

在我的Readme.md中，在ButtonGroup目录中：

```jsx

const Button =需要量(‘../index’)

你好，世界

你好，医生

当我这样做时，我的styleguide有一个错误，上面写着：

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

案件II

如上面所示，我尝试将信息封装在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>
  )
}

现在示例组件被导入到Readme.md中。

```jsx

const样例=需要量(‘./样例’)

()

这会抛出错误：

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

Answer 1

我知道我不需要定义常用的加载器和插件，因为样式主义者已经在内部添加了它们

这不是真的。Styleguidist不向代码中添加任何加载器。

SyntaxError:相邻的JSX元素必须封装在一个封闭标签中(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;

案件二

我不知道你想在这里做什么。