Question

我一直在想是否有一种方法来为故事书提供单个“主”文件？

这就是我想象的文件层次结构：
•
└── stories
    └── button
        ├── Button.js
        └── Button.stories.js
    └── SearchBox
        └──  SearchBox.js
        └──  SearchBox.story.js
    index.stories.js
index.stories.js将包含所有其他内容的导入故事。

`Button.stories.js`

import React from 'react''

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      ? ? ? ?
    </span>
  </Button>
);

export default { title: 'Button' };

现在，如果我将代码粘贴到index.stories.js中，这将可以工作，但是我只想将单独的故事导入到主文件中，而我不能全神贯注。我尝试了以下步骤，但无济于事：

`index.stories.js`

import React from 'react'
import Button from './button/Button.stories'

export const Main = <Button/>
export default = { title: 'Main-Testing' }

这是行不通的，只会导致babel-loader解析错误。同样，当我应该在此处导入故事时，导入React.Component也感觉不正确。

PS：我知道我可以简单地分别导入preview.js或main.js中的所有故事文件，但是我正在考虑特定于解决方案的问题拥有一个“主”文件。

那么，应该如何实现呢？

Answer 1

您可以尝试从自己的故事文件中将每个故事变体作为命名导出导出，然后将它们分别导入index.stories.js，然后从那里再次将它们一起导出。

例如：

index.stories.js：

import React from 'react';
import { First, Second } from './components/component.stories.js';
// First and Second are named exports from their own stories

export default {
  title: 'Show All Stories Here'
}

const AllComponents = () => <div><First /><Second /></div>

export  {First, Second, AllComponents}; 
// export all components individually, and then export them all together

您在故事书UI中得到的结构将是：

- Show All Stories Here
   - First // First would be displayed here
   - Second // Second would be displayed here
   - Allstuff // both First and Second would be displayed here

有没有办法为故事书提供“主文件”？

`Button.stories.js`

`index.stories.js`

1 个答案: