Question

我有一个很大的.stories.js文件，其中包含很多示例。为了使内容更简洁，我导入了不同的示例组件，但这样做时在显示原始组件的来源时遇到了问题。

示例：

// Button.js
export default Button = props => <Button size={props.size}>{props.text}</Button>;

// ButtonSizeStory.js
import Button from './Button.js';

export default ButtonSizeStory = () => 
    ['lg', 'sm', 'xs'].map(size => <Button size={size} text="I'm a button" />);

// Button.stories.js
import ButtonSizeStory from './ButtonSizeStory.js';

stories.add(
    "Button Sizes",
    withInfo()(() => <ButtonSizeStory />)
);

运行以上示例，在故事书中，组件的来源为

Source:
<ButtonSizeStoryExample />

但是我要显示的内容如下：

Source:
<Button size="lg" text="I'm a button" />
<Button size="sm" text="I'm a button" />
<Button size="xs" text="I'm a button" />

这似乎是一个足够普遍的用例，但我在文档中或此处都找不到任何内容。有什么建议（除了在Button.stories.js文件中包含所有示例）？

故事书-显示导入的组件源

0 个答案: