如何使用 Storybook AddOns optionsKnob 解析值答案

【问题标题】：How do I parse a value with Storybook AddOns optionsKnob如何使用 Storybook AddOns optionsKnob 解析值
【发布时间】：2020-07-18 03:09:11
【问题描述】：

我正在为客户构建故事书，我想使用单选按钮动态更改组件的颜色主题。我一直在关注文档，这就是我的代码的外观：

import { withKnobs, optionsKnob as options } from '@storybook/addon-knobs'

const label = 'Theme color';
const valuesObj = {
  Red: 'red',
  Blue: 'blue',
  Purple: 'purple',
  Green: 'green'
};
const defaultValue = 'red';

const optionsObj = {
  display: 'inline-radio'
};

const groupId = '';

const themeValue = options(label, valuesObj, defaultValue, optionsObj, groupId);

这将按预期显示正确的内嵌单选按钮，但只要我单击另一个单选按钮，内嵌按钮就会消失。我还尝试控制台记录themeValue，最初，它显示我的默认值（红色），但单击另一个值时它不会改变。

我一直在搜索文档，我只能找到如何implement 它，而不是如何解析/实际使用该值。我在这里错过了什么吗？

【问题讨论】：

您添加的链接实际上是来自 GitHub 的 @storybook/addon-knobs README。你看到 this example 的 React 了吗？它使用boolean 旋钮类型，但options 应该是相同的想法。

标签： reactjs storybook

【解决方案1】：

我想通了，嗯，我的一个同事想通了。

不要这样做：

const themeValue = options(label, valuesObj, defaultValue, optionsObj, groupId);

我现在在我的 React 组件中这样做：

<ExampleComponent theme={options(label, valuesObj, defaultValue, optionsObj, groupId)} />

问题解决了！

【讨论】：