React에서 다음과 같은 작업을 시도하고 있습니다 JSX(ObjectRow는 별도의 구성 요소입니다).

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

함수 호출에 매핑 JSX되기 때문에 이것이 왜 유효하지 않은지 알고 이해 JSX합니다. 그러나 템플릿 토지에서 와서 처음부터 JSX위의 내용을 어떻게 달성할지 확신 할 수 없습니다 (구성 요소를 여러 번 추가).

JavaScript 함수를 호출하는 것처럼 생각하십시오. for함수 호출에 대한 인수가가는 루프는 사용할 수 없습니다 .

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

함수 tbody에 for루프가 인수로 전달되는 방법을 살펴보십시오. 물론 구문 오류입니다.

그러나 배열을 만든 다음 인수로 전달할 수 있습니다.

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

JSX로 작업 할 때 기본적으로 동일한 구조를 사용할 수 있습니다.

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

덧붙여서, 내 JavaScript 예제는 JSX 예제가 거의 정확하게 변형 된 것입니다. 함께 놀러 바벨 REPL하는 JSX의 작동 방법에 대한 느낌을 얻을 수 있습니다.

이것이 귀하의 상황에 맞는지 확실하지 않지만 종종 지도 가 좋은 대답입니다.

이것이 for 루프가있는 코드 인 경우 :

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

map으로 다음 과 같이 작성할 수 있습니다 .

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6 구문 :

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

map()@FakeRainBrigand의 답변 을 좋아 하는 배열이없는 경우 소스 레이아웃이 @SophieAlpert의 답변보다 가까운 출력에 해당하도록 인라인하려는 경우 :

ES2015 (ES6) 구문 사용 (확산 및 화살표 기능)

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

재 : 바벨과 transpiling, 그것의 주의 사항 페이지 가 말한다 Array.from확산을 위해 필요하지만 현재 ( v5.8.23) 실제를 확산 할 때 경우 될 것 같지 않습니다 Array. 그것을 명확히하기 위해 문서 문제가 열려 있습니다. 그러나 자신의 위험이나 폴리 필로 사용하십시오.

바닐라 ES5

Array.apply

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

인라인 IIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

다른 답변의 기술 조합

소스 레이아웃을 출력에 맞게 유지하지만 인라인 된 부분을보다 간결하게 만듭니다.

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

ES2015 구문 및 Array메소드

으로 Array.prototype.fill당신이 전파를 사용하는 대신이 작업을 수행 할 수있는 위의 그림과 같이 :

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

(실제로에 대한 인수를 생략 할 수 있다고 생각 fill()하지만 100 %는 아닙니다.) 이전 버전의 fill()솔루션 에서 실수를 수정 한 @FakeRainBrigand에게 감사드립니다 (개정판 참조).

key

모든 경우에 keyattr은 개발 빌드에 대한 경고를 완화하지만 자식에서는 액세스 할 수 없습니다. 자식에서 인덱스를 사용할 수있게하려면 추가 속성을 전달할 수 있습니다. 자세한 내용은 목록 및 키 를 참조하십시오 .

ES6 구문과 함께 map Array 메소드를 사용하기 만하면 됩니다 .

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

key속성을 잊지 마십시오 .

사용 배열 맵 함수는 루프를 통해 매우 일반적인 방법입니다 배열 요소를 만들고 구성 요소가 그들에 따라 반작용 이 꽤 효율적에 루프 할 수있는 깔끔한 방법입니다 루프 할 수있는 좋은 방법입니다 JSX은 , 그건 하지 만 그것을 하는 방법 이지만 선호하는 방법입니다.

또한 필요에 따라 각 반복마다 고유 한 키 를 갖는 것을 잊지 마십시오 . 맵 함수 는 0에서 고유 인덱스를 작성하지만 생성 된 인덱스를 사용하는 것은 좋지 않지만 값이 고유하거나 고유 키가있는 경우이를 사용할 수 있습니다.

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

또한 Array의 map 함수에 익숙하지 않은 경우 MDN의 몇 줄 :

map은 배열의 각 요소에 대해 제공된 콜백 함수를 순서대로 한 번 호출하고 결과에서 새 배열을 구성합니다. 콜백은 undefined를 포함하여 값을 할당 한 배열의 인덱스에 대해서만 호출됩니다. 배열의 누락 된 요소 (즉, 설정되지 않았거나 삭제되었거나 값이 지정되지 않은 인덱스)에 대해서는 호출되지 않습니다.

콜백은 요소의 값, 요소의 색인 및 순회되는 Array 객체의 세 가지 인수로 호출됩니다.

thisArg 매개 변수를 맵핑하기 위해 제공하면 콜백의이 값으로 사용됩니다. 그렇지 않으면 undefined 값이이 값으로 사용됩니다. 콜백이 궁극적으로 관찰 할 수있는이 값은 함수에서 볼 수있는이를 결정하기위한 일반적인 규칙에 따라 결정됩니다.

map은 그것이 호출 된 배열을 변경하지 않습니다 (호출되면 콜백이 그렇게 할 수 있습니다).

이미 lodash를 사용하고 있다면이 _.times기능이 편리합니다.

import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <ol>
                    {_.times(3, i =>
                        <li key={i}>
                            <Select onSelect={this.onSelect}>
                                <option value="1">bacon</option>
                                <option value="2">cheez</option>
                            </Select>
                        </li>
                    )}
                </ol>
            </div>
        );
    }
}

리턴 블록 외부에서 추출 할 수도 있습니다.

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}

나는 이것이 오래된 스레드라는 것을 알고 있지만 React Templates 을 확인하고 싶을 수도 있습니다 .

예를 들어 반응 템플릿을 사용한 경우 다음과 같습니다.

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>

이를 수행하는 방법에는 여러 가지가 있습니다. JSX는 결국 JavaScript로 컴파일되므로 유효한 JavaScript를 작성하는 한 좋을 것입니다.

내 대답은 이미 여기에 제시된 모든 훌륭한 방법을 통합하는 것입니다.

객체 배열이없는 경우 간단히 행 수 :

return블록 내에서 작성 Array및 사용 Array.prototype.map:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

return블록 외부에서 일반적인 JavaScript for-loop를 사용하십시오.

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.push(<ObjectRow key={i}/>);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

즉시 함수 표현식을 호출했습니다.

render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

객체 배열이있는 경우

return블록 내에서 .map()각 객체는 <ObjectRow>구성 요소에 :

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

return블록 외부에서 일반적인 JavaScript for-loop를 사용하십시오.

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

즉시 함수 표현식을 호출했습니다.

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}

numrows가 배열이면 매우 간단합니다.

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

React의 배열 데이터 유형이 훨씬 우수합니다. 배열은 새로운 배열을 백업하고 필터를 지원하고 감소시킵니다.

map명령문 사용을 가리키는 몇 가지 답변이 있습니다 . 여기 내 반복자하여 완전한 예이다 FeatureList 리스트에 요소 기능 라는 JSON 데이터 구조에 기초하여 구성 요소 기능 .

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

GitHub 에서 전체 기능 목록 코드 를 볼 수 있습니다 . 기능의 비품은 여기에 나열됩니다 .

시간과 수익의 수에 대한 루프에, 당신의 도움으로 그것을 달성 할 수 from및 map:

<tbody>
  {
    Array.from(Array(i)).map(() => <ObjectRow />)
  }
</tbody>

어디 i = number of times

렌더링 된 컴포넌트에 고유 키 ID를 지정하려는 경우 React 문서React.Children.toArray 에서 제안한대로 사용할 수 있습니다.

React.Children.toArray

하위 불투명 데이터 구조를 각 하위에 키가 할당 된 평면 배열로 반환합니다. 렌더링 메소드에서 하위 컬렉션을 조작하려는 경우, 특히 this.props.children을 전달하기 전에 순서를 바꾸거나 슬라이스하려는 경우에 유용합니다.

노트 :

React.Children.toArray()자식 목록을 병합 할 때 중첩 배열의 의미를 유지하도록 키를 변경합니다. 즉, toArray는 반환 된 배열의 각 키 앞에 접두사를 붙여 각 요소의 키가 해당 배열을 포함하는 입력 배열로 범위를 지정합니다.

<tbody>
  {
    React.Children.toArray(
      Array.from(Array(i)).map(() => <ObjectRow />)
    )
  }
</tbody>

render 메소드 의 return () 내에서 이것을 변환하도록 선택하면 가장 쉬운 옵션은 map () 메소드를 사용하는 것 입니다. 아래와 같이 map () 함수를 사용하여 배열을 JSX 구문으로 매핑합니다 ( ES6 구문 사용 ).

내부 상위 컴포넌트 :

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

key하위 구성 요소에 추가 된 속성에 유의하십시오 . 키 속성을 제공하지 않은 경우 콘솔에 다음 경고가 표시됩니다.

경고 : 배열 또는 반복자의 각 자식에는 고유 한 "키"소품이 있어야합니다.

참고 : 사람들이 index반복 하는 실수 중 하나는 키로 사용하는 것 index입니다. 요소를 키로 사용하는 것은 안티 패턴이며 여기에서 자세한 내용을 읽을 수 있습니다 . 요컨대 정적 목록 이 아닌 경우 index키로 사용 하지 마십시오 .

이제 ObjectRow 구성 요소에서 해당 속성에서 객체에 액세스 할 수 있습니다.

내부 ObjectRow 구성 요소

const { object } = this.props

또는

const object = this.props.object

부모 컴포넌트 object에서 ObjectRow 컴포넌트 의 변수 로 전달한 객체를 가져와야 합니다. 이제 목적에 따라 해당 개체의 값을 추출 할 수 있습니다.

참고 문헌 :

자바 스크립트의 map () 메소드

ECMA 스크립트 6 또는 ES6

귀하의 주에 여러 항목이 있다고 가정 해 보겠습니다.

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>

ES2015 / Babel 가능성은 생성기 함수를 사용하여 JSX 배열을 만듭니다.

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

... 또는 객체 배열을 준비하여 원하는 출력을 갖도록 함수에 매핑 할 수도 있습니다. 렌더링 리턴 내에서 로직없이 코딩의 우수 사례를 유지하는 데 도움이되므로이를 선호합니다.

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

.map()컬렉션을 <ObjectRow>반복하고 각 반복에서 소품으로 항목을 반환 하는 데 사용 하십시오 .

objects어딘가에 배열 이라고 가정하면 ...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

ES2015 Array.from 맵 기능 + 키

아무것도없는 경우 함수를 .map()사용 Array.from()하여 map요소를 반복 할 수 있습니다 .

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

나는 이것을 사용한다 :

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

추신 : 열쇠를 잊지 마십시오. 그렇지 않으면 많은 경고가 나타납니다!

프로그래밍 논리가의 반환 값 외부에서 발생하는 접근 방식을 선호하는 경향이 render있습니다. 이렇게하면 실제로 렌더링하기 쉬운 것을 유지할 수 있습니다.

그래서 아마 다음과 같은 일을 할 것입니다 :

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

분명히 이것은 작은 양의 코드이므로 인라인으로 잘 작동 할 수 있습니다.

물론 다른 답변에서 제안한대로 .map으로 해결할 수 있습니다. 이미 babel을 사용하는 경우 jsx-control-statements 사용에 대해 생각할 수 있습니다. 설정이 약간 필요하지만 가독성 (특히 비 반응 개발자)의 관점에서 가치가 있다고 생각합니다. 린터를 사용하는 경우 eslint-plugin-jsx-control-statements도 있습니다

JSX 코드는 순수한 JavaScript 코드로 컴파일되며 모든 태그는 ReactElement객체 로 대체됩니다 . JavaScript에서는 반환 된 변수를 수집하기 위해 함수를 여러 번 호출 할 수 없습니다.

불법입니다. 유일한 방법은 배열을 사용하여 함수가 반환 한 변수를 저장하는 것입니다.

또는 이 상황을 처리하기 위해 JavaScript ES5부터 사용 Array.prototype.map가능한 것을 사용할 수 있습니다.

어쩌면 Angularng-repeat 와 마찬가지로 반복 함수를 구현하기 위해 새로운 JSX 구문을 다시 작성하기 위해 다른 컴파일러를 작성할 수 있습니다 .

이것은 여러 가지 방법으로 수행 할 수 있습니다.

1. 위에서 제안한 것처럼 return모든 요소를 ​​배열에 저장 하기 전에

2. 내부 루프 return

   방법 1

    let container =[];
       let arr = [1,2,3] //can be anything array, object 
   
       arr.forEach((val,index)=>{
         container.push(<div key={index}>
                        val
                        </div>)
           /** 
           * 1. All loop generated elements require a key 
           * 2. only one parent element can be placed in Array
           * e.g. container.push(<div key={index}>
                                       val
                                 </div>
                                 <div>
                                 this will throw error
                                 </div>  
                               )
           **/   
       });
       return (
         <div>
            <div>any things goes here</div>
            <div>{container}</div>
         </div>
       )

   방법 2

      return(
        <div>
        <div>any things goes here</div>
        <div>
           {(()=>{
             let container =[];
             let arr = [1,2,3] //can be anything array, object 
             arr.forEach((val,index)=>{
               container.push(<div key={index}>
                              val
                              </div>)
                            });
                       return container;     
           })()}
   
        </div>
     </div>
   )

여기에 간단한 해결책이 있습니다.

var Object_rows=[];
for (var i=0; i < numrows; i++) {
    Object_rows.push(<ObjectRow/>)
} 
<tbody>
  {Object_rows}
</tbody>

매핑과 복잡한 코드가 필요하지 않습니다. 행을 배열로 푸시하고 값을 반환하여 렌더링하면됩니다.

JSX 코드 내에 Javascript 구문을 작성하고 있으므로 Javascript를 중괄호로 묶어야합니다.

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}  
</tbody>

다음은 React doc의 샘플입니다. JavaScript Expressions as Children

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

귀하의 경우, 다음과 같이 작성하는 것이 좋습니다.

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

React는 Key를 사용하여 배열의 데이터를 다르게하므로 Key는 매우 중요합니다.

나는 그것을 좋아한다

<tbody>
  { numrows ? (
     numrows.map(obj => { return <ObjectRow /> }) 
    ) : null
  }
</tbody>

당신은 다음과 같은 것을 할 수 있습니다 :

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

좋은 질문입니다.

특정 수의 구성 요소를 추가하려고 할 때 도우미 기능을 사용합니다.

JSX를 리턴하는 함수를 정의하십시오.

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

자체 호출 기능을 사용할 수도 있습니다.

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>