Question

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

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

例如，我有一个<Toggle />，你可以看到here从其父级获取值并从其props中调用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')})} />
    ))

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

1 个答案: