反応スタイルガイドの依存関係を持つコンポーネントを追加するには

Question

ButtonGroupコンポーネントレンダリングButtonを `react-styleguidist 'を使って記述したいと思います。

私はこのようになりますstyleguidistのWebPACKのコンフィグ持つ：src/components/インサイド

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

を、styleguidistは私のコンポーネントをピックアップすることを可能にするためのディレクトリ構造が少し次のようになります。

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

ケースI

ディレクトリ内の私の Readme.mdで0

：

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

ケースII

を私が囲んで試してみました：

```jsx 
const Button = require('../index') 

<ButtonGroup> 
    <Button type='primary' size='lg'>Hello, World</Button> 
    <Button type='primary' size='lg'>Hello, Doctor</Button> 
</ButtonGroup> 
``` 

私は、私のstyleguideが言うエラーがあることを行います上記の図のようにButtonGroupディレクトリ内のexample.jsの情報、ファイルcon TAINS：

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

を私はありませんあなたがここで何をしようとしているのか確かめてください。