有没有办法在React.render（）函数中渲染多个React组件？

小编典典

有没有办法在React.render（）函数中渲染多个React组件？

reactjs

例如我可以做：

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进行转译时

阅读 900

2020-07-22

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

切记仅设置按键。

更新

现在从16.2版本开始，您可以使用片段

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

短语法

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

在，ReactDOM.render您仍然无法渲染多个项目，因为react需要一个根。因此，您可以在中渲染单个组件，ReactDOM.render并在内部组件中渲染一系列项目。

2020-07-22