javascript - 输出 React 组件的 n 个实例

Question

我想创建 React 组件的 n 个实例。

考虑到 JSX 只能包含表达式，有什么好的简洁方法可以做到这一点？

我目前正在尝试以下操作:

<Wrapper>
  {repeat(n)(i => <MyComponent i={i} />}      
</Wrapper>

function repeat(n) {
    return cb => Array(n).fill(null).forEach((_, i) => cb(i));
}

Answer 1

您可以随意使用 JavaScript :)

render() {
  const lst = [1, 2, 3, 4];
  return (
    <div>
      {lst.map(itm => <span key={itm}>{itm}</span>)}
    </div>
  );
}

如果您没有准备好key，您可以使用映射回调的第二个参数，即数组中的索引。 More info on MDN .

在您没有数组而只有数字的特定情况下:

render() {
  var times = [];
  for (let i = 0; i < 10; i++) {
    times.push(<MyComponent key={i} i={i} />);
  }
  return <Wrapper>{times}</Wrapper>;
}

另请检查this answer关于如何使用 for 循环。它不是那么好，但也有效。我相信 React 团队计划让 JSX 中的数组使用更加直接。

如果您只有一个数字，并且不想使用 for 循环，您也可以“伪造”它，例如使用 string.repeat 。不确定这是否非常可读:)

render() {
  return (
    <div>
      {'a'.repeat(10).split('').map((_, i) => <MyComponent i={i} />}
    </div>
  );
}