例如我可以做:
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版本开始,您可以使用片段
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并在内部组件中渲染一系列项目。
ReactDOM.render