Storybook: UI объекта ручек исчезает при изменении значений

Созданный на 25 февр. 2020 · 2Комментарии · Источник: storybookjs/storybook

Опишите ошибку

При изменении значений object отображаемого через @storybook/addon-knobs , пользовательский интерфейс исчезает.

Воспроизводить

Создайте object с помощью дополнительных кнопок
npm run storybook
Измените значения object на вкладке регуляторов Storybook
Обратите внимание, что object исчезает

Ожидаемое поведение

Значения object должны быть доступны для редактирования из пользовательского интерфейса Storybook без исчезновения ручки.

Скриншоты

storybook-knobs-object-bug

Фрагменты кода

Рабочий пример здесь: https://github.com/benjarwar/storybook-knobs-object-test

Клонировать репо
npm i
npm run storybook

Система:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v8.15.1/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v8.15.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.1
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.14 => 5.3.14 
    @storybook/addon-knobs: ^5.3.14 => 5.3.14 
    @storybook/addon-links: ^5.3.14 => 5.3.14 
    @storybook/addons: ^5.3.14 => 5.3.14 
    @storybook/react: ^5.3.14 => 5.3.14

knobs question / support

Источник

benjarwar

👍1

Самый полезный комментарий

Проблема здесь в том, что вы не создаете ручку объекта внутри функции истории. Если вы измените свой пример на что-то вроде этого, у вас все будет готово:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer 26 февр. 2020

👍5

Все 2 Комментарий

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer 26 февр. 2020

👍5

Ах, спасибо @jonspalmer. Это действительно помогло, и в этом есть смысл.

benjarwar 26 февр. 2020

Была ли эта страница полезной?

0 / 5 - 0 рейтинги