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

oknwwptz  于 2023-04-28  发布在  Java
关注(0)|答案(8)|浏览(186)

我需要能够循环一个数字并返回一些jsx。举个例子

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

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

bwntbbo3

bwntbbo31#

你可以使用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 spread语法和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>
6l7fqoea

6l7fqoea2#

你可以这样做:

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

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

mhd8tkvw3#

你需要使用递归迭代器,比如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

slwdgvem

slwdgvem4#

这是最简单的方法

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>
ghhaqwfi

ghhaqwfi5#

你可以用

<ul>
   <li>{[...Array.from(Array(10).keys())].map((num, i) => <p key={i}>{num}</p>)}</li>
</ul>
1sbrub3j

1sbrub3j6#

这对我很有用https://www.codegrepper.com/code-examples/javascript/react+loop+number+of+times

const n = 8;

{[...Array(n)].map((elementInArray, index) => ( 
    <div className="" key={index}> Whatever needs to be rendered repeatedly... </div> 
    ) 
)}
wrrgggsh

wrrgggsh7#

如果你不介意添加一个非常常见和有用的库,你可以在这种情况下使用lodash和map,它会很好很干净。

import _ from "lodash";

return (
    <ul>{_.range(1, 10).map(i => (<li>i</li>))}<ul>
)
toe95027

toe950278#

这是一种使用
Array.from()
方法,它接受两个参数。第一个是长度,第二个是一个回调函数,可以对循环的数字做任何你想做的事情。下面是一个注销0到9的数字的示例

const sampleArray = Array.from({length:10},(_,index)=>{console.log(index)})

相关问题