Storybook: UI objek Knobs menghilang saat mengubah nilai

Dibuat pada 25 Feb 2020 · 2Komentar · Sumber: storybookjs/storybook

Jelaskan bugnya

Saat mengubah nilai dari object diberikan melalui @storybook/addon-knobs , UI menghilang.

Untuk Mereproduksi

Buat object menggunakan addon-knob
npm run storybook
Ubah nilai object di tab kenop Buku Cerita
Perhatikan bahwa object menghilang

Perilaku yang diharapkan

Nilai object harus dapat diedit dari dalam UI Buku Cerita tanpa kenop menghilang.

Screenshot

storybook-knobs-object-bug

Potongan kode

Contoh kerja di sini: https://github.com/benjarwar/storybook-knobs-object-test

Gandakan repo
npm i
npm run storybook

Sistem:

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

Sumber

benjarwar

👍1

Komentar yang paling membantu

Masalahnya di sini adalah Anda tidak membuat kenop objek di dalam fungsi cerita. Jika Anda mengubah contoh Anda menjadi seperti ini, Anda harus siap:

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 pada 26 Feb 2020

👍5

Semua 2 komentar

Masalahnya di sini adalah Anda tidak membuat kenop objek di dalam fungsi cerita. Jika Anda mengubah contoh Anda menjadi seperti ini, Anda harus siap:

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 pada 26 Feb 2020

👍5

Ah, terima kasih @jonspalmer. Itu memang berhasil, dan masuk akal.

benjarwar pada 26 Feb 2020

Apakah halaman ini membantu?

0 / 5 - 0 peringkat