Как я могу разобрать значение с помощью опции Storybook AddOnsKnob

Question

Я создаю сборник рассказов для клиента и хочу динамически изменять цветовую тему компонентов с помощью переключателей. Я следил за документами, и вот как выглядит мой код:

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

Это отобразит правильные встроенные переключатели, как и предполагалось, но как только я нажму на другое радио, встроенные кнопки будут исчезают. Я также попытался console.log для themeValue, и первоначально он показывает мое значение по умолчанию (красное), но оно не изменяется при нажатии на другое значение.

Я искал документацию, и я могу только найти, как реализовать это, но не как разобрать / реально использовать значение. Я что-то здесь упускаю?

Answer 1

Я понял это, ну, мой коллега сделал.

Вместо того, чтобы делать это:

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

Я сейчас делаю это в своем компоненте React:

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

Проблема решена!