如何动态渲染 JSX 组件 X 次？答案

【问题标题】：How to dynamically render JSX component X times?如何动态渲染 JSX 组件 X 次？
【发布时间】：2018-04-08 10:15:01
【问题描述】：

考虑一个 React 组件的渲染函数的简单示例：

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

目前rowLimit 没用.. 但我想用这个数字来确定渲染了多少{rows()}s。有没有干净的方法来做到这一点？

使用for (let i = 0; i < rowLimit; i++) 循环感觉很笨拙...我将奖励样式积分以获得更好的解决方案

注意：row() 返回一个 JSX 元素

【问题讨论】：

查看this tut。

标签： reactjs jsx

【解决方案1】：

我相信这样的事情对你有用：

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

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

【讨论】：

这不行，你不能用{rows}在JSX中渲染一个数组（rows）
它工作得很好，是的，你可以将数组渲染为 { rows }，只要里面是 html/jsx 代码。当然，上面你必须将 rows.push() 更改为你的组件的名称，或者其他一些 jsx/html。看看我的小提琴：jsfiddle.net/smlacerda5/bxhp72zp

【解决方案2】：

你可以这样做 { [...Array(rowLimit).keys()].map(() => row()) } 使用 lodash 甚至使用_.range() 创建数组，但在我看来这不值得，stevelacerda7 解决方案足够简洁。

【讨论】：

【解决方案3】：

您可以使用Array#from 将限制转换为行数组：

class Tbody extends React.Component {
  render () {
    const { rowLimit = 5 } = this.props; // destructure with defaults instead of trinary
    
    return (
      <tbody>
      {
        Array.from({ length: rowLimit }, (_, k) => (
          <tr key={k}>
            <td>{k}</td>
          </tr>
        ))
      }
      </tbody>
    )
  }  
}

ReactDOM.render(
  <table>
    <Tbody />
  </table>,
  demo
);

td {
  border: 1px solid black;
}

<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="demo"></div>

【讨论】：