Javascript 输出React组件的n个实例

我想创建React组件的

n

实例

如果JSX只能包含表达式，那么哪种简洁的方法可以做到这一点

我目前正在尝试以下方法：

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

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

{重复（n）（i=>}
功能重复（n）{
返回cb=>Array（n）.fill（null）.forEach（（（uu，i）=>cb（i））；
}

您可以使用任意多的JavaScript语言：）

还要检查如何对循环使用

。虽然不太好，但也很管用。我相信React团队已经计划在JSX中更直接地使用阵列

如果您只有一个数字，并且不想使用for循环，您也可以“伪造”它，例如使用。但不确定这是否可读性很强：）

render（）{
返回(
{'a'。重复（10）.split（''）.map（（{'a'，i）=>}
);
}
我已经多次使用map来实现这一点。读者注意到：“key”属性很重要。（如果没有，React会抱怨）我想问题的关键是我没有要映射的列表。相反，我只是有一个数字。“JSX只能包含表达式”并不完全正确。我建议在返回格式化的JSX之前在渲染方法中进行任何格式化。另外，请查看“确定”谢谢。您能给我一个permitte语句的示例吗JSX内部的d？
render() {
  const lst = [1, 2, 3, 4];
  return (
    <div>
      {lst.map(itm => <span key={itm}>{itm}</span>)}
    </div>
  );
}

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

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