JSX 내부의 React에서 숫자를 루프오버하는 방법

JSX 내부의 React에서 숫자를 루프오버하는 방법

번호를 루프하여 jsx를 반환할 수 있어야 합니다.예를들면

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

이것은 내가 하고 싶은 일은 아니지만, 이것을 해결할 수 있다면 내가 해야 할 일을 완수할 수 있을 것이다.단, 이 명령어는 다음 명령에서 예상되는 식을 반환합니다.for제가 조사를 좀 해봤는데 사람들이 그러는데for아무것도 반환하지 않기 때문에 jsx 내부에서 루프가 발생합니다.

어느 정도의 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>

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>

다음과 같이 할 수 있습니다.

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

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

맵, ForEach, 필터 등의 재귀 반복기를 사용해야 합니다.이런 걸 꼭 해야 한다면 할 수 있어

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

edit: 익혀야 할 기능은 다음과 같습니다.

이것은 간단한 방법이다.

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>

사용할 수 있습니다.

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

이것은 나에게 효과가 있었다.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> 
    ) 
)}

만약 당신이 매우 흔하고 유용한 라이브러리를 추가하는 것을 꺼려하지 않는다면, 당신은 이 상황에서 lodash와 지도를 사용할 수 있고, 그것은 깨끗하고 멋질 것입니다.

import _ from "lodash";

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

언급URL : https://stackoverflow.com/questions/47287177/how-to-loop-over-a-number-in-react-inside-jsx