如何在 JSX 中循环遍历 React 中的数字

Question

我需要能够遍历一个数字并返回一些 jsx。例如

<ul>
 {for(i =0; i < 10; i++){
   return <li>{i}</li>
 }}
</ul>

这不完全是我想要做的，但如果我能解决这个问题，那么我应该能够完成我需要做的事情。然而，这会返回预期在 for 上的表达式。我做了一些研究，人们说你不能在 jsx 中使用 for 循环，因为它们不返回任何东西。

我如何去循环一个数字来返回一些 jsx？

原文由 Taylor Austin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Array.from() 代替。

 let App = () => {
  return <ul>{Array.from(Array(10), (e, i) => {
    return <li key={i}>{i}</li>
  })}</ul>
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

 <script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>

您还可以将 ES6 传播语法与 map() 方法一起使用。

 let App = () => {
  return <ul>{[...Array(10)].map((e, i) => {
    return <li key={i}>{i}</li>
  })}</ul>
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

 <script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以这样做：

 createElements(n){
    var elements = [];
    for(i =0; i < n; i++){
        elements.push(<li>{i}</li>);
    }
    return elements;
}

<ul>
    {this.createElements(20)}
</ul>

原文由 Vivek Doshi 发布，翻译遵循 CC BY-SA 3.0 许可协议