Reactjs 如何动态呈现JSX组件X次？

考虑React组件的渲染功能的一个简单示例：

render () {
  const rowLimit = this.props.rowLimit ? this.props.rowLimit : 5
  return (
    <tbody>
      {row()}
      {row()}
      {row()}
      {row()}
      {row()}
    </tbody>
  )
}

render（）{
const rowLimit=this.props.rowLimit？this.props.rowLimit:5
返回(
{row（）}
{row（）}
{row（）}
{row（）}
{row（）}
)
}

当前

行限制

无效。。但是我想用这个数字来确定渲染了多少

{rows（）}

s。有没有干净的方法可以做到这一点

使用

for（让i=0；i

循环感觉笨拙。。。我将为更好的解决方案奖励样式点

---

注意：

row（）

返回一个JSX元素

我相信这样的东西对您有用：

render () {
  const rowLimit = this.props.rowLimit ? this.props.rowLimit : 5;
  let rows = [];
  for (let i = 0; i < rowLimit; i++) {
    rows.push(<Row key={Math.floor(Date.now() + i)} />);
  }

  return (
    <tbody>
      { rows }
    </tbody>
  )
}

render（）{
const rowLimit=this.props.rowLimit？this.props.rowLimit:5；
让行=[]；
for（设i=0；i

其中Row是您的Row组件，您可以根据需要向其添加道具。

您可以这样做

{[…数组（行限制）.keys（）].map（（）=>row（））}

使用lodash，甚至可以使用

..range（）
 您可以使用将限制转换为行数组：


class-Tbody.Component{
渲染（）{
const{rowLimit=5}=this.props；//使用默认值而不是三元组进行解构
返回(
{
Array.from（{length:rowLimit}，（\uk）=>(
{k}
))
}
)
}  
}
ReactDOM.render(
,
演示
);
td{
边框：1px纯黑；
}

签出。这不起作用，您不能使用
{rows}
在JSX中呈现数组（
rows
），它工作得很好，是的，您可以将数组呈现为{rows}，只要里面是html/JSX代码。当然，在上面，您必须将rows.push（）更改为组件的名称或其他jsx/html。看看我的小提琴：