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

Question

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

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

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

如何循环遍历数字以返回一定数量的 jsx？

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>

您还可以通过 map() 方法使用 ES6 扩展语法。

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>