Question

在我的测试套装中，我试图动态生成带有道具的组件，所以我最终会得到这样的组件：

<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} />

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

Answer 2

你无法通过一个字符串数组进行映射，并按照你的方式将它们应用为boolean props。请尝试迭代遍历具有每个按钮类型的映射作为具有真值的键。

class MyApp extends React.Component {
  render() {
  let arr = [{primary: true}, {secondary: true}]
    return (
      <div>
        {arr.map(buttonType => <Button {...buttonType} />)}
      </div>
    );
  }
}

const Button = (props) => {
  if(props.primary) return <button className="primary">Primary</button>;
  if(props.secondary) return <button className="secondary">Secondary</button>;
  return null;
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

.primary {
  background: orange;
}

.secondary {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

React - 字符串的动态属性

2 个答案: