React.render() 함수에 여러 개의 React 컴포넌트를 렌더링하는 방법이 있습니까?

React.render() 함수에 여러 개의 React 컴포넌트를 렌더링하는 방법이 있습니까?

예를 들어 다음과 같이 할 수 있습니다.

import React from 'react';
import PanelA from './panelA.jsx';
import PanelB from './panelB.jsx';

React.render( 
  <PanelA />
  <PanelB />, 
  document.body  
);

여기서 React는 다음을 렌더링합니다.

body
   PanelA
   PanelB

현재 다음과 같은 오류가 발생합니다.

Adjacent JSX elements must be wrapped in an enclosing tag

browserify 및 babelify를 사용하여 변환하는 동안

React v16.0 릴리스에서는 컴포넌트 내부에 있는 경우 아이템을 추가 요소로 래핑하지 않고 컴포넌트 배열을 렌더링할 수 있습니다.

render() {
  return [
    <li key="one">First item</li>,
    <li key="two">Second item</li>,
    <li key="three">Third item</li>,
    <li key="four">Fourth item</li>,
  ];
}

반드시 키를 설정해 주세요.

갱신하다

16.2 버전부터는 fragments를 사용할 수 있게 되었습니다.

  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }

짧은 구문

  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }

에서ReactDOM.render반응에는 루트가 필요하기 때문에 여러 항목을 렌더링할 수 없습니다.이 때문에, 1개의 컴포넌트를 렌더링 할 수 있습니다.ReactDOM.render내부 컴포넌트에 일련의 아이템을 렌더링합니다.

반응 > = 16.2

버전 16.2 이후<React.Fragment />(또는<></>조건을 사용할 수 있습니다.

이것이 바람직한 방법입니다.

return (
    <React.Fragment>
        <h1>Page title</h1>
        <ContentComponent />
        {this.props.showFooter && (
            <footer>(c) stackoverflow</footer>
        )}
    </React.Fragment>
)

리액트 16

리액트 16을 사용하면render()컴포넌트 리스트의 메서드를 지정합니다.의 트레이드 포인트는 렌더를 쉽게 조정할 수 없기 때문에 추가가 필요하다는 것입니다.key각 컴포넌트의 속성을 지정합니다.

return [
    <h1 key="page-title">Page</h1>,
    <ContentComponent key="content" />,
    <footer>(c)stackoverflow</footer>
]

반응 < 16

이전 버전의 React에서는 여러 구성 요소를 둘러싸는 요소(태그, 구성 요소)로 감싸지 않고 렌더링할 수 없습니다.예:

return (
  <article>
    <h1>title</h1>
    <meta>some meta</meta>
  </article>
)

이러한 요소를 하나의 요소로 사용할 경우 해당 요소에서 모듈을 생성해야 합니다.

여러 컴포넌트를 하나의 태그로 묶기만 하면 됩니다.예를 들어 다음과 같습니다.

React.render(
  <div>
    <PanelA />
    <PanelB />
  </div>, 
  document.body  
);

React 16 이전 버전에서는 여러 개의 최상위 요소가 동일한 환경에서render()모든 것을 부모 요소로 랩해야 합니다(일반적으로<div>):

render () {
  return (
    <div>
      <Thing1 />
      <Thing2 />
    </div>
  )
}

React 16에서는 다음과 같은 최상위 요소 배열을 렌더링하는 기능이 도입되었습니다(각 요소에는 고유한 키가 있어야 한다는 경고가 표시됨).

render () {
  return ([
    <Thing1 key='thing-1' />,
    <Thing2 key='thing-2' />
  ])
}

React 16.2에서는<Fragment>Element(소자)는 Element(소자)와 동일하게 기능합니다.<div>첫 번째 예에서는 의미 없는 부모를 남기지 않는다<div>DOM 주변을 어슬렁거립니다.

import React, { Fragment } from 'react'

...

render () {
  return (
    <Fragment>
      <Thing1 />
      <Thing2 />
    </Fragment>
  )
}

줄임말 구문이 있지만 대부분의 도구(예: 구문 강조 표시기)에서는 아직 지원되지 않습니다.

import React from 'react'

...

render () {
  return (
    <>
      <Thing1 />
      <Thing2 />
    </>
  )
}

여러 컴포넌트를 렌더링하는 경우 트리 라이크 구조를 유지하기 위해 컴포넌트를 서로 중첩해야 합니다.이는 Multiple Components 문서 페이지에 설명되어 있습니다.

최종적으로 최상위 레벨에 노드가1개만 있으면 동작합니다.

할 수 는 1개의 DOM <div>

  <div>
    <PanelA />
    <PanelB />
  </div>

그러나 더 복잡한 앱을 만들고 더 많은 인터링크 구성 요소를 가지고 있으므로 이와 같이 하위 구성 요소를 상위 구성 요소로 묶는 것이 가장 좋습니다.

import React from 'react';
import PanelA from './panelA.jsx';
import PanelB from './panelB.jsx';

var PanelHolder = React.createClass({
  render: function() {
    return (
      <div>
        <PanelA />
        <PanelB />
      </div>
    )
  }
});

그런 다음 메인 js 파일에서 다음을 수행합니다.

import React from 'react';
import PanelHolder from './panelHolder.jsx';

React.render( 
  <PanelHolder /> 
  document.body  
);

이렇게도 할 수 있어요.

const list = [item1, item2]
const elements = (
    <div>
      {list.map(element => element)}
    </div>
  );
ReactDOM.render(elements, document.body);

this.propsTextBox.value = this._context.parameters.textBoxProperty.raw || "";
var elements = new Array<React.SFCElement<any>>();
elements.push(React.createElement(
                TextField, 
                this.propsTextBox
            ));
elements.push(React.createElement(
    Label, 
    this.propsLabel
));

ReactDOM.render(
    elements,  
    this._container
);

React.render( 
  <PanelA>
      <PanelB />
  </PanelA> 
  document.body  
);

언급URL : https://stackoverflow.com/questions/32577886/is-there-a-way-to-render-multiple-react-components-in-the-react-render-functio