javascript - React - 来自字符串的动态属性

Question

在我的测试服中，我试图动态生成带有 props 的组件，所以我最终会得到这样的组件:

<Button primary />
<Button secondary />

目前，我有点卡住了:

  [
    'primary',
    'secondary'
  ].forEach((buttonType) => {
    it(`should render the '${buttonType}' button`, () => {
      const button = mount(<Button {...buttonType}>Click me</Button>); // incorrect - will not work
      // rest of the test omitted
    });
  });

如有任何帮助，我们将不胜感激。

Answer 1

您应该在给 forEach 的函数参数中将 cardType 替换为 buttonType。

然后，您应该在测试中使用以下内容:

const dynamicProps = { [buttonType]: true };
<Button {...dynamicProps} />

有些元素已被省略，但您明白了。当你传递一个没有明确定义的 prop 时，你实际上是指 someProp={true}，所以在上面的例子中你必须使用 primary 或其他任何东西作为属性一个值为 true 的对象。