时间戳

首页 > 解决方案 > 如何重用 Storybook 的组件故事格式 (CSF) 中的旋钮？

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

问题描述

我有一个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 中，但是当我更新下拉列表时，新值不会传递给旋钮。

我在这里做错了什么？

标签： javascriptreactjsstorybook

解决方案

显然，当您将道具作为函数传播时，这很有效。这就是我最终让事情发挥作用的方式：

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>;

推荐阅读