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

답변

답변

답변