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

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

대부분의 경우 부모 태그는 문제가 되지 않습니다.

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.

어떻게 하면 두 개의 형제 요소를 링으로 묶지 않고 렌더링할 수 있을까요?<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.Fragment, it behaves much more like wrapping it in a<div>또는 이와 유사한 경우.key아이들을 역동적으로 만들지 않으면 필요하지 않습니다.먼저 어레이를 fragment로 랩할 수 있습니다.

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 />짧은 구문 때문에<></>는 Atribut을 받아들이지 않습니다.

주의: 짧은 구문을 사용하는 경우 Babel 7을 사용해야 합니다.

소스 레퍼런스

우후! 리액트 팀이 드디어 이 기능을 추가했습니다.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>
  ];
}

여기서 "새로운 렌더 반환 유형: fragments and string"에 대해 설명하는 블로그 투고 전문을 참조하십시오.

대부분의 경우 부모 요소가 있으면 도움이 됩니다.예를 들어 부모 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.Fragment★★★★★★★★★★★★★★★★★,

ReactDOM.render(
  <React.Fragment>
     <Item1/>
     <Item2/>
  </React.Fragment>,document.getElementById('root')
);

하지만 이것은 더 짧은 손길이 있다.

ReactDOM.render(
  <>
     <Item1/>
     <Item2/>
  </>,document.getElementById('root')
);

를 부 the로 React.Fragment DOM 에 .

다음과 같이 괄호로 묶을 수 있습니다.

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

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