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>

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

编辑：these are the functions you should familiarize yourself with

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>

Answer 5

你可以把它作为 JSX 的孩子是一个 React.Node，例如它可以是这样的


// as array of jsx
<YourComponent>
  [
    <Child1/>,
    <Child2/>,
    <Child3/>
  ]
</YourComponent>

// text
<YourComponent>
  What a great day!
</YourComponent>


// or just another jsx
<YourComponent>
  <Child/>
</YourComponent>

所以我的建议是，你要么在函数内循环一个值，然后在 JSX 内调用该函数，这样 JSX 就会看到值。

比如

loopAndLoop(){
  // your looping here
  return yourReturnVal
}

<YourComponent>
  {/** call loopAndLoop here */}
  {loopAndLoop()}
</YourComponent>

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

5 个答案: