如何动态渲染JSX组件X次? [英] How to dynamically render JSX component X times?

问题描述

考虑一个React组件的render函数的简单示例:

Consider a simple example of the render function of a React component:

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

当前rowLimit是没有用的..但是我想使用该数字来确定呈现了多少{rows()}个.有一种干净的方法可以做到这一点吗?

Currently rowLimit is useless.. but I would like to use that number to determine how many {rows()}s are rendered. Is there a clean way to do this?

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

Using a for (let i = 0; i < rowLimit; i++) loop feels clunky... I will award style points for a better solution

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

Note: row() returns a JSX element

推荐答案

您可以使用

You can use Array#from to convert limit to an array of rows:

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>

这篇关于如何动态渲染JSX组件X次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！