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 作为第一个参数传递给 story 函数。第二个参数是“上下文”，其中包含故事参数等内容。

您应该能够通过对故事函数签名进行小幅调整来访问 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 装饰器将道具传递给故事不起作用

1 个答案: