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

From the docs:

parameters.passArgsFirst: In Storybook 6+, we pass the args as the first argument to the story function. The second argument is the “context” which contains things like the story parameters etc.

您应该可以访问 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)}
    />
  );
}

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

Storybook 6 decorator pass props to story not working

reactjs

storybook