小编典典

有没有办法在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进行转译时


阅读 903

收藏
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