React의 다른 반환문으로 여러 줄 JSX를 반환하려면 어떻게 해야 합니까?

React의 다른 반환문으로 여러 줄 JSX를 반환하려면 어떻게 해야 합니까?

한 줄이면 충분합니다.

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

태그를 함수 호출로 간주합니다(매뉴얼 참조).그 후 첫 번째 항목은 다음과 같습니다.

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

그리고 두 번째는:

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

이제 두 번째 스니펫은 의미가 없다는 것이 분명해졌습니다(JavaScript에서 두 개 이상의 값을 반환할 수 없습니다).다른 요소로 묶거나 둘 중 하나를 사용해야 합니다(대부분 원하는 것으로, 그렇게 함으로써 유효한 정보를 제공할 수 있습니다).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>
  ]);
})}

결과 어레이를 평평하게 할 필요는 없습니다.리액션이 해줄 거예요.http://jsfiddle.net/mEB2V/1/ 를 참조해 주세요.다시: 두 요소를 div/section으로 묶는 것이 장기적으로 더 나을 수 있습니다.

어레이 반환에 대한 Jan Olaf Krems의 답변은 더 이상 적용되지 않는 것 같습니다(아마도 @dogmatic69가 댓글로 쓴 것처럼 React ~0.9 이후일 것입니다).

문서에는 단일 노드를 반환해야 한다고 나와 있습니다.

최대 JSX 루트 노드 수

현재 컴포넌트의 렌더에서는 1개의 노드만 반환할 수 있습니다.예를 들어 반환할 div 목록이 있는 경우 컴포넌트를 div, span 또는 기타 컴포넌트로 랩해야 합니다.

JSX는 일반 JS로 컴파일된다는 것을 잊지 마십시오. 두 함수를 반환하는 것은 구문적으로 의미가 없습니다.마찬가지로, 삼진제에 한 명 이상의 아이를 넣지 마세요.

대부분의 경우, 단순히 데이터 포장을 통해<div>또는<span>.

저 같은 경우에는 여러 개를 반품하고 싶었습니다.<tr>s. 나는 그것들을 포장으로 감쌌다.<tbody>– 테이블은 여러 개의 본문을 가질 수 있습니다.

리액트 16.0에서는 각 요소에 다음 각 요소가 있는 한 어레이를 반환하는 것은 명백히 허용됩니다.key: 새로운 렌더 반환 유형: fragment 및 string

React 16.2를 사용하면 요소 목록을 다음과 같이 묶을 수 있습니다.<Fragment>…</Fragment>또는 심지어<>…</>어레이보다 원하는 경우 https://reactjs.org/docs/fragments.html 를 참조해 주세요.

React 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 에서는, 복수의 요소를 랩 하기 위해서 사용할 수 있는, 라고 하는 신기능이 도입되었습니다.

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의 일반적인 패턴은 컴포넌트가 여러 요소를 반환하는 것입니다.fragment를 사용하면 DOM에 노드를 추가하지 않고 하위 목록을 그룹화할 수 있습니다.

명시적인 <React>로 선언된 fragment.fragment > 구문에 키를 포함할 수 있습니다.예를 들어 설명 목록을 작성하기 위해 컬렉션을 fragment 배열에 매핑하는 경우가 있습니다.

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에 전달할 수 있는 유일한 속성입니다.향후 이벤트 핸들러 등의 Atribute에 대한 지원을 추가할 수 있습니다.

또한 React 구성 요소 내의 일부 도우미 기능에 있는 여러 목록 항목을 반환할 수도 있습니다.만 하면 .key★★★★

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>,
    ]
  }
}

갱신필

리액트 프래그먼트를 사용합니다.간단해요.프래그먼트 문서 링크.

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

물론 반응 복합체를 설치해야 합니다.

npm install react-composite --save

fragment React fragment로 할 수 .<></> ★★★★★★★★★★★★★★★★★」React.Fragment:

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

하시면 됩니다.createFragment여기, 키 조각 참조.

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.

이 오류는 현재 프로젝트 폴더에 없거나 현재 있는 폴더에 여러 프로젝트가 포함되어 있을 때 발생합니다. 이 오류가 발생할 수 있습니다.

비슷한 오류가 발생하여 현재 프로젝트 폴더로 전환하여 실행하면 문제가 사라집니다.

언급URL : https://stackoverflow.com/questions/23840997/how-can-i-return-multiple-lines-jsx-in-another-return-statement-in-react