如何在 Storybook 的组件故事格式 (CSF) 中重用旋钮？

Question

我有一个包含多个故事的简单 Button 组件。所有这些故事都需要相同的旋钮配置。

这种方法有效：

export const Default = () => <Button size={select('size', ['x-large', 'normal', 'x-small'], 'x-small')}>Button</Button>;
export const Disabled = () => <Button disabled size={select('size', ['x-large', 'normal', 'x-small'], 'x-small')}>Button</Button>;
export const Outline = () => <Button outline size={select('size', ['x-large','normal', 'x-small'], 'x-small')}>Button</Button>;

但是，我不想一遍又一遍地重复select 语句。我试过传播，像这样：

const knobs = {
  size: select('size', ['x-large', 'normal', 'x-small'], 'x-small')
};

export const Default = () => <Button {...knobs}>Button</Button>;
export const Disabled = () => <Button disabled {...knobs}>Button</Button>;
export const Outline = () => <Button outline {...knobs}>Button</Button>;

但不起作用：旋钮显示在 UI 中，但是当我更新下拉列表时，新值未传递给旋钮。

我做错了什么？

Answer 1

显然，当您将 props 作为函数传播时，这很有效。这就是我最终使事情正常进行的方式：

const knobs = () => ({
  size: select('size', ['x-large', 'normal', 'x-small'], 'x-small')
});

export const Default = () => <Button {...knobs()}>Button</Button>;
export const Disabled = () => <Button disabled {...knobs()}>Button</Button>;
export const Outline = () => <Button outline {...knobs()}>Button</Button>;

Answer 2

你能试试这个吗:

const knobs = {
  size: () => select('size', ['x-large', 'normal', 'x-small'], 'x-small')
};

如何在 Storybook 的组件故事格式 (CSF) 中重用旋钮？

How do I reuse knobs in Storybook's Component Story Format (CSF)?

javascript

reactjs

storybook