React의 다른 return 문에서 JSX 여러 줄을 반환하는 방법은 무엇입니까?

Question 1

한 줄이 잘 작동합니다.

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return <p>{n}</p>
    }}
  );
}

여러 줄이 아님

render: function () {
  return (
    {[1,2,3].map(function (n) {
      return (
        <h3>Item {n}</h3>
        <p>Description {n}</p>
      )
    }}
  );
}

감사.

Question 2

태그를 함수 호출로 생각하십시오 ( docs 참조 ). 그러면 첫 번째는 다음과 같습니다.

{[1,2,3].map(function (n) {
  return React.DOM.p(...);
})}

그리고 두 번째 :

{[1,2,3].map(function (n) {
  return (
    React.DOM.h3(...)
    React.DOM.p(...)
  )
})}

이제 두 번째 스 니펫이 실제로 의미가 없다는 것이 분명합니다 (JS에서 둘 이상의 값을 반환 할 수 없음). 다른 요소 (원하는 것, 유효한 key속성을 제공 할 수도 있음)로 래핑 하거나 다음과 같이 사용할 수 있습니다.

{[1,2,3].map(function (n) {
  return ([
    React.DOM.h3(...),
    React.DOM.p(...)
  ]);
})}

JSX 설탕 사용 :

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

결과 배열을 평면화 할 필요가 없습니다. React가 자동으로 수행합니다. 다음 바이올린 http://jsfiddle.net/mEB2V/1/를 참조하십시오 . 다시 말하지만, 두 요소를 div / 섹션으로 래핑하는 것이 장기적으로 더 좋습니다.

Question 3

배열 반환에 대한 오래된 답변이 더 이상 적용되지 않는 것 같습니다 (@ dogmatic69 가 주석에 썼 듯이 React ~ 0.9 이후 ).

문서 에서는 단일 노드를 반환해야한다고 말합니다.

최대 JSX 루트 노드 수

현재 구성 요소의 렌더링에서는 하나의 노드 만 반환 할 수 있습니다. 예를 들어 반환 할 div 목록이있는 경우 구성 요소를 div, 범위 또는 기타 구성 요소로 래핑해야합니다.

JSX가 일반 JS로 컴파일된다는 것을 잊지 마십시오. 두 함수를 반환하는 것은 실제로 구문 상 의미가 없습니다. 마찬가지로 삼항에 둘 이상의 자식을 넣지 마십시오.

대부분의 경우 간단히 a <div>또는 <span>.

제 경우에는 여러 <tr>s 를 반환하고 싶었습니다 . 나는 그것들을 포장했습니다 <tbody>– 테이블은 여러 개의 몸체를 가질 수 있습니다.

편집 : React 16.0부터 각 요소에 https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html 이있는 한 배열 반환이 다시 허용됩니다 key. # new-render-return-types-fragments-and-strings

편집 : 16.2 당신이 가진 요소의 목록 둘러싸고 있습니다 반작용 <Fragment>…</Fragment>또는 심지어 <>…</>, 당신은 배열에 그것을 선호하는 경우 : https://blog.jmes.tech/react-fragment-and-semantic-html/

Question 4

에서 v16.0.0 반응 이후, 그것은 그 안에 배치로 복귀 여러 요소들 수있다Array

render() {
  return (
    {[1,2,3].map(function (n) {
      return [
        <h3>Item {n}</h3>.
        <p>Description {n}</p>
      ]
    }}
  );
}

또한 React v16.2.0 에서 React Fragments여러 요소를 래핑하는 데 사용할 수 있는 새로운 기능 이 도입되었습니다.

render() {
  return (
    {[1,2,3].map(function (n, index) {
      return (
        <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
        </React.Fragment>
      )
    }}
  );
}

문서에 따라 :

React의 일반적인 패턴은 구성 요소가 여러 요소를 반환하는 것입니다. 프래그먼트를 사용하면 DOM에 추가 노드를 추가하지 않고도 자식 목록을 그룹화 할 수 있습니다.

명시 적 구문으로 선언 된 조각에는 키가있을 수 있습니다. 이에 대한 사용 사례는 컬렉션을 조각 배열에 매핑하는 것입니다. 예를 들어 설명 목록을 만들려면 다음과 같이하십시오.
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}
key는 Fragment에 전달할 수있는 유일한 속성입니다. 향후 이벤트 핸들러와 같은 추가 속성에 대한 지원을 추가 할 수 있습니다.

Question 5

또한 React 구성 요소 내의 일부 도우미 함수에서 여러 목록 항목을 반환 할 수 있습니다. key속성 과 함께 html 노드 배열을 반환하십시오 .

import React, { Component } from 'react'

class YourComponent extends Component {
  // ...

  render() {
    return (
      <ul>
        {this.renderListItems()}
      </ul>
    )
  }      

  renderListItems() {
    return [
      <li key={1}><a href="#">Link1</a></li>,
      <li key={2}><a href="#">Link2</a></li>,
      <li key={3} className="active">Active item</li>,
    ]
  }
}

Question 6

createFragment여기에서 사용할 수 있습니다 .

https://facebook.github.io/react/docs/create-fragment.html

import createFragment from 'react-addons-create-fragment';
...
{[1,2,3].map((n) => createFragment({
    h: <h3>...</h3>,
    p: <p>...</p>
  })
)}

(여기서 ES6 및 JSX 구문 사용)

먼저 react-addons-create-fragment패키지 를 추가해야 합니다.

npm install --save react-addons-create-fragment

Jan Olaf Krems의 솔루션에 비해 장점 : 반응은 실종에 대해 불평하지 않습니다 key

Question 7

업데이트 됨

React Fragment를 사용하십시오. 간단 해. 단편 문서에 대한 링크 .

render() {
  return (
    <>
    {[1,2,3].map((value) => <div>{value}</div>)}
    </>
  );
}

이전 답변-구식

React> 16에서는 react-composite를 사용할 수 있습니다 .

import { Composite } from 'react-composite';

// ...

{[1,2,3].map((n) => (
  <Composite>
    <h2>Title {n}</h2>
    <p>Description {n}</p>
  </Composite>
))};

물론 react-composite를 설치해야합니다.

npm install react-composite --save

Question 8

그것은 단편 반응에 의해 간단 <></>하고 React.Fragment:

return (
    <>
      {[1, 2, 3].map(
        (n, index): ReactElement => (
          <React.Fragment key={index}>
            <h3>Item {n}</h3>
            <p>Description {n}</p>
          </React.Fragment>
        ),
      )}
    </>
  );