Есть ли способ визуализации нескольких компонентов React в функции React.render()?

Ответ 1

Начиная с версии 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>,
  ];
}

Не забудьте только установить ключи.

UPDATE

Теперь из версии 16.2 вы можете использовать фрагменты

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

Краткий синтаксис

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

В ReactDOM.render вы по-прежнему не можете визуализировать несколько элементов, потому что для реакции нужен рут. Таким образом, вы можете визуализировать один компонент внутри ReactDOM.render и отобразить массив элементов во внутреннем компоненте.

Ответ 2

Реагировать> = 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>
)

Если вы хотите использовать их как один элемент, вы должны создать из них модуль.

Ответ 3

Просто оберните несколько компонентов в один тег. Например:

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

Ответ 4

До 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>, который работает в точности как в <div> в первом примере, но не оставляет бессмысленного родителя <div> висящего вокруг DOM:

import React, { Fragment } from 'react'

...

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

Для этого существует сокращенный синтаксис, но он не поддерживается большинством инструментов (например, синтаксическими маркерами):

import React from 'react'

...

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

Ответ 5

Если вы хотите отобразить несколько компонентов, вам нужно вложить их друг в друга, чтобы поддерживать структуру Tree-Like. Это объясняется на их странице документов для нескольких компонентов

В конечном счете, пока есть один узел на верхнем уровне, он может работать.

Вы можете использовать только один элемент 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  
);