如何在JSX中的React中循环一个数字

Question

我需要能够循环一个数字并返回一些jsx.例如

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

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

如何循环遍历数字以返回一定数量的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>

您还可以使用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>

Answer 2

你可以这样做：

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

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

Answer 3

你需要使用递归迭代器，例如map、forEach、filter等。如果你确实需要做这样的事情，你可以

const statelessComp = props => {
    let arr = Array.apply(null, {length: 10}).map(Number.call, Number);
    return (    
        <ul>
            {arr.map(item => {
                return <li>{item}</li> 
            })}
        </ul>
    )
}

编辑：这些是您应该熟悉的功能

Answer 4

这是简单的方法

createElements(number){
    var elements = [];
    for(i =0; i < number; i++){
        elements.push(<div className="list-item">{i} - Some text or element</div>);
    }
    return elements;
}

在退货声明中

<div>
    {this.createElements(10)}
</div>