Storybook: 更改值时，旋钮对象UI消失

创建于 2020-02-25 · 2评论 · 资料来源: storybookjs/storybook

描述错误

更改通过@storybook/addon-knobs渲染的object的值时，UI消失。

重现

使用addon-knobs创建一个object
npm run storybook
在“故事书”旋钮选项卡中更改object值
请注意object消失了

预期行为

object值应可在Storybook UI中进行编辑，而旋钮不会消失。

屏幕截图

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 等级

Storybook: 更改值时，旋钮对象UI消失

最有用的评论

所有2条评论

相关问题