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

Question

我正在使用伟大的storybook/react，但我遇到了一个问题。

我有很多依赖 props 的组件（无状态），所以在我的实际应用程序中，我有保持状态的容器组件。

例如，我有一个<Toggle />, 如您在此处看到的，它从其父级获取值并从其道具调用 onChange 来更改它。我想在我的故事书中有这种行为，但不知道怎么做：

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

Answer 1

您可以使用其中一个 storyebook 状态插件，就像我前段时间发布的这个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')})} />
    ))