React JSX 내부 루프

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 are adding 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의 예제가 변환하는 것과 거의 똑같습니다. JSX 가 어떻게 작동하는지 알아보려면 Babel REPL 을 사용하십시오.

Babel · The compiler for next generation JavaScript

 

 

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

이것이 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>