故事书将参数传递给箭头函数

Question

我正在尝试将 args 传递给 MyComponent，如下所示，来自 SB 故事。

export default {
  title: "Storybook",
  component: MyComponent,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
}; 
const Template = ({ args }) => {
  return (
      <MyComponent {...args} />
  );
};

export const First = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
First.args = {
  storyName: "First One",
  prop1: "One - 1",
  prop2: "Two - 2",
};

组件定义如下。

export const MyComponent = ({ prop1, prop2 }) => { 
  return (
    <span>{prop1}--{prop1}</span>
  );
};

prop1 和 prop2 未定义。

Answer 1

const Template = ({ args }) => {
  return (
      <MyComponent {...args} />
  );
};

上面的模板应该如下所示

const Template = (args) => {
  return (
      <MyComponent {...args} />
  );
};

Storybook Args

故事书将参数传递给箭头函数

Storybook passing args to arrow function

reactjs

storybook