Storybook: تختفي واجهة مستخدم كائن المقابض عند تغيير القيم

تم إنشاؤها على ٢٥ فبراير ٢٠٢٠ · 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 في ٢٦ فبراير ٢٠٢٠

👍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 في ٢٦ فبراير ٢٠٢٠

👍5

آه ، شكرًا jonspalmer. هذا بالفعل فعل الحيلة ، ومن المنطقي.

benjarwar في ٢٦ فبراير ٢٠٢٠

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات