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 在故事中是未定义的。我在 sb v5 中有类似的设置。
知道我缺少什么吗？

Answer 1

From the docs:

parameters.passArgsFirst：在 Storybook 6+ 中，我们将 args 作为第一个参数传递给故事函数。第二个参数是“上下文”，其中包含故事参数等内容。

通过对故事功能签名稍作调整，您应该能够访问state 和setState：

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

// mycomponent.stories.tsx

export const TwoButtons = (args, context) => {
  const { state, setState } = context;

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