javascript - Storybook React 及其示例组件不起作用

Question

我目前正在关注这个：https ://storybook.js.org/basics/writing-stories/

我创建了一个示例组件按钮：

import React from 'react';

const Button = props => {
    return (
        <button>
           Hello
        </button>
    );
};

export default Button;

但是，我不确定 Storybook 的幕后情况是什么，最终会在左侧导航区域中创建故事，但在我的构建中呈现的故事示例实际上是我的默认 Hello 按钮。

Answer 1

您是否提到，当您启动故事书时，您只会看到带有“hello”文本的按钮，而不是您传递给它的任何道具值？

如果是这样，您必须使用上述答案中提到的按钮定义中的道具。

如果是其他问题，请提供更多信息。

Answer 2

首先，这不是你使用道具的方式。

import React from 'react';

const Button = () => {
    return (
        <button>
           Hello
        </button>
    );
};

export default Button;

这将起作用。如果您想使用道具，请这样做。

import React from 'react';

const Button = (props) => {
    return (
        <button>
           {this.props.yourPropName}     
        </button>
    );
};

export default Button;

this.props.yourPropName将显示您使用道具发送的内容。