Storybook 6 装饰器将道具传递给故事不起作用

Question

我在用着@storybook/react v6.1.21。我希望可以选择使用state和setState道具将状态传递给我的故事。

这就是我定义装饰器的方式：

//preview.js
export const decorators = [
    Story => {
        const [state, setState] = useState();
        return <Story state={state} setState={setState} />;
    }
];

// mycomponent.stories.tsx

export const TwoButtons = ({ state, setState }) => (
    <ButtonGroup
        buttons={[
            { label: 'One',value: 'one'},
            { label: 'Two', value: 'two' }
        ]}
        selectedButton={state}
        onClick={val => setState(val)}
    />
);

但由于某种原因，state 和 setState 在故事中没有定义。我在 Storybook v5 中也有类似的设置。
知道我缺少什么吗？

Answer 1

来自文档：

\n

\n

parameters.passArgsFirst：在 Storybook 6+ 中，我们将 args 作为第一个参数传递给 Story 函数。第二个参数是 \xe2\x80\x9ccontext\xe2\x80\x9d，其中包含故事参数等内容。

\n

\n

您应该能够通过对故事函数签名进行小幅调整来访问state和：setState

\n

//preview.js\nexport const decorators = [\n    Story => {\n        const [state, setState] = useState();\n        return <Story state={state} setState={setState} />;\n    }\n];\n\n// mycomponent.stories.tsx\n\nexport const TwoButtons = (args, context) => {\n  const { state, setState } = context;\n\n  return (\n    <ButtonGroup\n        buttons={[\n            { label: \'One\',value: \'one\'},\n            { label: \'Two\', value: \'two\' }\n        ]}\n        selectedButton={state}\n        onClick={val => setState(val)}\n    />\n  );\n}\n

\n