형제 요소를 부모 태그에 래핑하지 않고 렌더링하려면 어떻게해야합니까?

대부분의 경우 상위 태그가있는 것은 문제가되지 않습니다.

React.createClass({
    render: function() {
        return (
            <tbody>
                <tr><td>Item 1</td></tr>
                <tr><td>Item 2</td></tr>
            </tbody>
        );
    }
});

그러나 부모없이 하나의 렌더링 함수에 형제 요소가있는 것이 합리적 일 경우가 있습니다. 특히 테이블의 경우 테이블 행을 div.

React.createClass({
    render: function() {
        return (
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
        );
    }
});

두 번째 예제는 다음 오류를 제공합니다 Adjacent XJS elements must be wrapped in an enclosing tag while parsing file..

두 형제 요소를 a <div>또는 유사한 것으로 래핑하지 않고 어떻게 렌더링 할 수 있습니까?

이것은 현재 제한 사항이지만 향후 언젠가는 수정 될 것입니다 ( github repo에는 몇 가지 공개 된 문제가 있습니다 ).

지금은 배열을 반환하는 함수를 사용할 수 있습니다 (기본적으로 상태 비 저장 구성 요소입니다).

function things(arg, onWhatever){
    return [
        <tr><td>Item 1</td></tr>,
        <tr><td>Item 2</td></tr>
    ];
}

그리고 그것을 당신의 구성 요소에서 사용하십시오.

return (
    <table><tbody>
      {things(arg1, this.handleWhatever)}
      {things(arg2, this.handleWhatever)}
    </tbody></table>
);

최신 정보

React 16에서는 렌더링에서 배열을 반환 할 수 있습니다.

또 다른 업데이트

이제 최상위 배열을 반환하거나 <React.Fragment>.

배열을 사용하면 각 항목에 키를 배치해야합니다. React는 동적으로 생성 된 목록 대신 두 요소가 상수라는 것을 알지 못하기 때문입니다.

function RowPair() {
  return [
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]
}

를 사용하면 React.Fragmenta <div>또는 이와 유사한 것으로 래핑하는 것과 훨씬 더 비슷하게 작동하며 key, 자식을 동적으로 빌드하지 않는 경우 a 가 필요하지 않습니다. 먼저, 배열을 조각으로 감쌀 수 있습니다.

function RowPair() {
  return <React.Fragment>{[
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]}</React.Fragment>
}

그런 다음 배열과 keys를 완전히 제거 할 수 있습니다 .

function RowPair() {
  return <React.Fragment>
    <tr><td>First</td></tr>
    <tr><td>Second</td></tr>
  </React.Fragment>
}

나는 이것이 오래된 게시물이라는 것을 알고 있지만 아마도 내 대답은 나와 같은 초보자에게 도움이 될 수 있습니다.

React 16.2에서는 Fragments 에 대한 향상된 지원 이 추가되었습니다.

이제 다음과 같이 반환 할 수 있습니다.

return (
  <>
    <tr><td>Item 1</td></tr>
    <tr><td>Item 2</td></tr>
  </>
);

<></>또는로 포장 할 수 있습니다 <Fragment></Fragment>.

일부 속성을 전달하려는 경우 작성시 키만 지원되며 <Fragment />짧은 구문 <></>은 속성을 허용하지 않으므로 사용해야 합니다.

참고 : 짧은 구문을 사용하려는 경우 Babel 7을 사용하고 있는지 확인하십시오 .

소스 참조

우후! React 팀은 마침내이 기능을 추가했습니다. React v16.0부터 다음을 수행 할 수 있습니다.

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
      <tr key="a"><td>Item 1</td></tr>,
      <tr key="b"><td>Item 2</td></tr>
  ];
}

여기에서 "새로운 렌더링 반환 유형 : 조각 및 문자열"을 설명 하는 전체 블로그 게시물을 참조 하십시오 .

부모 요소가 있으면 대부분의 경우에 도움이됩니다. 예를 들어 자식 요소 스타일과 몇 가지 다른 시나리오를 대상으로 할 수 있는 부모 className 을 가질 수 있습니다.

하지만 정말로 그렇게하고 싶지 않다면 React.Fragment

따라서 다음과 같이 간단히 수행하십시오.

<React.Fragment>
  <First />
  <Second />
  <Third />
</React.Fragment>

에서 버전 16.2 , 단축 된 버전은 사용도가 <>렌더링 기능에 다음과 같이한다 :

render() {
  return (
    <>
      <First />
      <Second />
      <Third />
    </>
  );
}

또한 버전 16.0 이상을 사용하는 경우 아래와 같이 부모 래퍼가 필요하지 않은 요소 배열을 반환 할 수 있습니다.

render() {
 return [
  <h1 key="heading">Hello from Alireza!</h1>,
  <p key="first">Here where I'm!</p>,
  <p key="second">And again here :)</p>
 ];
}

다음과 같이 대괄호로 감쌀 수 있습니다.

React.createClass({
    render: function() {
        return (
          [
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
          ]
        );
    }
});

이 예는 저에게 잘 맞습니다.

let values = [];

if (props.Values){
  values = [
    <tr key={1}>
      <td>props.Values[0].SomeValue</td>
    </tr>
  ,
    <tr key={2}>
        <td>props.Values[1].SomeValue</td>
        </tr>
    ];
}

return (
    <table className="no-border-table table">
      <tbody>
        <tr>
            <th>Some text</th>
        </tr>
        {values}
      </tbody>
    </table>
)

이 구문과 같은 것이 나를 위해 일했습니다.

this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});

TypeScript를 사용하는 사람들에게 올바른 구문은 다음과 같습니다.

return [
  (
    <div>Foo</div>
  ),
  (
    <div>Bar</div>
  )
];