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）中的旋钮？

2 个答案: