我需要能够遍历一个数字并返回一些 jsx。例如
<ul>
{for(i =0; i < 10; i++){
return <li>{i}</li>
}}
</ul>
这不是我想要做的,但如果我能解决这个问题,那么我应该能够完成我需要做的事情。然而,这会返回 for
上预期的表达式。我做了一些研究,有人说你不能在 jsx 中使用 for
循环,因为它们不返回任何东西。
如何循环遍历数字以返回一定数量的 jsx?
最佳答案
您可以改用 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>
关于javascript - 如何在 JSX 中循环遍历 React 中的数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47287177/