Question

我正在使用React Storybook。每当我将道具传递给组件时，我都希望可以使用Knob插件对其进行编辑：

    @FindBy(id = "defaults")
    private WebElement defaultsLink;

    public void clickDefaults() {
    waitForAngularRequestsToFinish();
    assertThat("defaults Link is Not Present", defaultsLink, isDisplayed());
    driver.click(defaultsLink);
    }

    @FindBy(id = "DSDdefaults")
    private WebElement dsdDefaultsLink;

    public void clickDsdDefaults() {
    waitForAngularRequestsToFinish();
    assertThat("dsdDefaults Link is Not Present", dsdDefaultsLink, isDisplayed());
    driver.click(dsdDefaultsLink);
    }

上面的代码有效，但是我必须重复道具名称，例如“ foo”和“ bar”。可以使用可重用的功能来避免这种情况吗？

我尝试了以下操作，但是调用storiesOf("ComponentA", module).add("default", () => ( <ComponentA foo={object("foo", 100)} /> )); storiesOf("ComponentB", module).add("default", () => ( <ComponentB bar={object("bar", false)} /> ));函数会导致错误，即使它没有传播到React组件中

editableProps

警告：道具类型失败：提供给的道具const editableProps = (propName, propValue) => { return { [propName]: object(propName, propValue) }; }; storiesOf("ComponentA", module).add("default", () => ( <ComponentA {...editableProps('foo', 100)} /> ));无效 knob.value。

Answer 1

这不是最好的语法，但我有一些有用的方法：

import { text, number } from "@storybook/addon-knobs/react";

const editableProps = (name, value) => {
  const types = {
    string: text,
    number
  };
  const type = types[typeof value];
  return {
    [name]: type(name, value)
  };
}

storiesOf("ComponentA", module).add("default", () => (
  <ComponentA {...editableProps("foo", 100)} />
));
storiesOf("ComponentB", module).add("default", () => (
  <ComponentB {...editableProps("text", "Im a string")} />
));

可重用的函数，以避免与React Storybook的Knob插件重复道具名称？

1 个答案: