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

Question

考虑一个 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 元素

Answer 1

您可以使用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>