Storybook: 値を変更すると、ノブオブジェクトのUIが消えます

作成日 2020年02月25日 · 2コメント · ソース: storybookjs/storybook

バグを説明する

@storybook/addon-knobs介してレンダリングされたobjectの値を変更すると、UIが表示されなくなります。

再現するには

作成object使用してアドオン・ノブを
npm run storybook
Storybookノブタブでobject値を変更します
object消えることに注意してください

予想される行動

object値は、ノブが消えることなくStorybookUI内から編集できる必要があります。

スクリーンショット

storybook-knobs-object-bug

コードスニペット

ここでの作業例： https ：

リポジトリのクローンを作成する
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 2020年02月26日

👍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 2020年02月26日

👍5

ああ、@ jonspalmerに感謝します。それは確かにトリックを行い、理にかなっています。

benjarwar 2020年02月26日

このページは役に立ちましたか？

0 / 5 - 0 評価