Javascript React-字符串的动态属性

在我的测试套装中，我尝试使用道具动态生成组件，因此我最终将使用如下组件：

<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
    });
  });

[
"主要",，
“次要的”
].forEach（（按钮类型）=>{
它（`应该呈现'${buttonType}'按钮'，（）=>{
const button=mount（单击我）；//不正确-将不起作用
//其余的测试被省略
});
});

---

任何帮助都将不胜感激。

您应该在给forEach的函数参数中将

cardType

替换为

buttonType

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

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

constdynamicrops={[buttonType]：true}；

---

有些元素被省略了，但你明白了。当您在没有明确定义的情况下传递一个prop时，实际上是指

someProp={true}

，因此在上述情况下，您必须使用

primary

或任何对象的属性，如果值为true

，则无法通过字符串数组进行映射，也无法将这些字符串作为布尔道具进行应用。尝试遍历一个将每个按钮类型作为具有真值的键的映射

MyApp类扩展了React.Component{ render（）{ 设arr=[{primary:true}，{secondary:true}] 返回( {arr.map（buttonType=>）} ); } } 常量按钮=（道具）=>{ if（props.primary）返回primary； 如果（道具辅助）返回辅助； 返回null； } ReactDOM.render（，document.getElementById（“app”）

.primary{
背景：橙色；
}
.中学{
背景：灰色；
}

您有

卡片类型

，但随后使用

按钮类型

？修复，这只是我的实验