Question

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

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

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

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

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

Answer 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是你的行组件，你可以根据需要添加道具。

Answer 2

你可以这样做 import { APP_CONFIG } from './app-config-export'; export function configFactory() { return (window as any).appConfig; } @NgModule({ providers: { provide: APP_CONFIG, useFactory: configFactory, } }) 使用lodash甚至用{ [...Array(rowLimit).keys()].map(() => row()) }创建数组，但在我看来它不值得，stevelacerda7解决方案足够整洁。

Answer 3

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

＆＃13;

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

＆＃13;

td {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

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

3 个答案: