Question

我想使用 @ storybook / addon-knobs 方法 text 。我在代码type ButtonColor = 'primary' | 'transparent' | 'light'中设置了这种类型，我想在输入中输入文本（来自插件的文本）：

const ButtonStories = () => (
  <Button
    borderRadius={16}
    color={text('color', 'primary')}
  >
    {text('value', 'Button')}
  </Button>
)

但是当我使用它时，会出现错误：

类型'string'不能分配给类型'primary'| “光” | “透明” |未定义

我该如何解决？

Answer 1

问题在于文本确实返回了字符串，这并没有限制用户输入任何可以使用无线电组件的值。

// Change ButtonColor where it's defined
enum ButtonColor { primary = 'primary', transparent = 'transparent', light = 'light' }

// use enum values as Array.
const ButtonColors = Object.keys(ButtonColor)

// Or redefine all values as an array
// const ButtonColors = ['primary', 'transparent', 'light']

const ButtonStories = () => (
  <Button
    borderRadius={16}
    color={radio('color', ButtonColors, ButtonColor.primary)}
  >
    {text('value', 'Button')}
  </Button>
)

我该如何解决打字稿和@ storybook / addon-knobs的问题

1 个答案: