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

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

---

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

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

You can wrap it with <></> or <Fragment></Fragment>.

If you would like to pass some attributes, only key is supported at the time of writing, and you'll have to use <Fragment /> since the short syntax <></> doesn't accept attributes.

Note: If you are going to use the short syntax, make sure that you are using Babel 7.

Source Reference

---

Woohoo! The React team finally added this feature. As of React v16.0, you can do:

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

See the full blog post explaining "New render return types: fragments and strings" here.

---

You can wrap it to the brackets like this:

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

---

This example is work well for me:

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

---

Something like this syntax worked for me

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

---

For those, who uses TypeScript, the correct syntax is:

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

참고URL : https://stackoverflow.com/questions/28371370/how-do-i-render-sibling-elements-without-wrapping-them-in-a-parent-tag