有没有办法在React.render()函数中呈现多个React组件？

Question

例如,我可以这样做:

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进行转换

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

请记住只设置密钥.

在ReactDOM.render你仍然无法渲染多个项目,因为react需要一个root.因此,您可以ReactDOM.render在内部组件中呈现单个组件并呈现项目数组.

Answer 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

从React 16开始,您可以从<></>方法返回组件列表.交易是你不能轻易地条件渲染,需要添加render()属性到列表中的每个组件.

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

如果你想将它们真正地用作一个元素,你必须从它们创建一个模块.

Answer 3

只需将多个组件包装成单个标签即可.例如:

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

Answer 4

在React 16之前,同一个中的多个顶级元素render()需要您将所有内容包装在父元素中(通常为a <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 />
    </>
  )
}

Answer 5

如果您希望渲染多个组件,则需要将它们嵌套在另一个组件中,以便维护Tree-Like结构.这在多个组件的文档页面上进行了解释

最终只要顶层有一个节点就可以工作.

你可以只使用一个DOM元素,如a <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  
);