Storybook: मान बदलते समय नोज़ ऑब्जेक्ट UI गायब हो जाता है

को निर्मित 25 फ़र॰ 2020 · 2टिप्पणियाँ · स्रोत: storybookjs/storybook

बग का वर्णन करें

जब एक के मूल्यों को बदलने object के माध्यम से प्रदान की गई @storybook/addon-knobs , यूआई गायब हो जाता है।

प्रजनन करना

Addon-knobs का उपयोग करके object बनाएँ
npm run storybook
स्टोरीबुक नॉब्स टैब में object मान बदलें
नोट object गायब हो जाता है

अपेक्षित् व्यवहार

object मान नॉब के गायब होने के बिना स्टोरीबुक यूआई के भीतर से संपादन योग्य होना चाहिए।

स्क्रीनशॉट

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 रेटिंग्स