javascript - 如何在 react /故事书中正确使用外部状态

Question

我正在使用很棒的 storybook/react , 但我遇到了一个问题。

我有很多依赖 props 的组件(无状态的)，所以在我真实世界的应用程序中，我有保持状态的容器组件。

例如，我有一个 <Toggle /> ，如您所见here从其父级获取值(value)并从其 Prop 调用 onChange 来更改它。我想在我的故事书中有这种行为，但不知道如何去做:

storiesOf('Toggle', module).add('', () => (
  <Toggle name="toggle" checked={/*  what here ? */} onChange={/* what here ? */} />
))

Answer 1

您可以使用故事书状态插件之一，就像我前段时间发布的这个 https://www.npmjs.com/package/@sambego/storybook-state

您的代码可能如下所示，其中 checked 属性将从商店自动传递，onChange 方法将更新商店。

const store = new Store({
    checked: true,
});

storiesOf('Toggle', module)
    .addDecorator(StateDecorator(store))
    .add('', () => (
        <Toggle name="toggle" onChange={() => store.set({checked: store.get('checked')})} />
    ))