React JSX 내부 루프

Question

React JSX(ObjectRow가 별도의 구성 요소인 경우)에서 다음과 같은 작업을 수행하려고 합니다.

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

JSX가 함수 호출에 매핑되기 때문에 이것이 왜 유효한 JSX가 아닌지 깨닫고 이해합니다. 그러나 템플릿 세계에서 왔으며 JSX를 처음 사용하는 경우 위의 목표(구성 요소를 여러 번 추가)를 달성하는 방법을 잘 모르겠습니다.

Answer 1

이것이 귀하의 상황에 적합한지 잘 모르겠지만 일반적으로 maps가 좋은 대답입니다.

이것이 for 루프를 사용하는 코드인 경우:

으아악

map을 사용하여 다음과 같이 쓸 수 있습니다:

으아악

ES6 구문:

으아악

Answer 2

JavaScript 함수를 호출하는 것처럼 생각해보세요. for 루프를 사용하여 함수 호출에 인수를 전달할 수 없습니다.

으아아아

tbody 함수가 어떻게 tbody 如何作为参数传递给 for 루프에 인수로 전달되어 구문 오류가 발생하는지 확인하세요.

하지만 배열을 만들어 매개변수로 전달할 수 있습니다.

으아아아

---

JSX를 사용할 때 기본적으로 동일한 구조를 사용합니다.

으아아아

그런데 내 JavaScript 예제는 JSX 예제와 거의 똑같은 것을 변환합니다. Babel REPL을 사용해 JSX 작동 방식을 느껴보세요.