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

Posted 2023-02-19

【中文标题】Storybook 6 装饰器将道具传递给故事不起作用

【英文标题】：Storybook 6 decorator pass props to story not working

【发布时间】：2021-06-18 05:08:31

【问题描述】：

我正在使用@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 中有类似的设置。 知道我缺少什么吗？

【参考方案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)
    />
  );

【讨论】：

它有帮助。谢谢。但是在文档中找不到...你有参考吗？