Javascript 有没有办法在 React.render() 函数中渲染多个 React 组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32577886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to render multiple React components in the React.render() function?
提问by Bryan Grace
For example could I do:
例如，我可以这样做：
import React from 'react';
import PanelA from './panelA.jsx';
import PanelB from './panelB.jsx';
React.render(
<PanelA />
<PanelB />,
document.body
);
where React would render:
React 将呈现的位置：
body
PanelA
PanelB
Currently I'm getting the error:
目前我收到错误：
Adjacent JSX elements must be wrapped in an enclosing tag
while transpiling with browserify and babelify
使用 browserify 和 babelify 进行编译时
回答by David Ginanni
Since the React v16.0 release you can render an array of components without wrapping items in an extra element when you are inside a component:
从 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>,
];
}
Remember only to set the keys.
记住只设置键。
UPDATE
更新
Now from the 16.2 version you can use the Fragments
现在从 16.2 版本开始，您可以使用 Fragments
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
Short syntax
简短的语法
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
In the ReactDOM.renderyou still can't render multiple items because react needs a root. So you can render a single component inside the ReactDOM.renderand render an array of items in the internal component.
在ReactDOM.render你仍然无法渲染多个项目，因为反应需要一个根。因此，您可以在 内部渲染单个组件ReactDOM.render并在内部组件中渲染一组项目。
回答by Pavel Hasala
React >= 16.2
反应 >= 16.2
Since version 16.2 <React.Fragment/>(or <></>for short) was introduced, so you can use conditions. This is the preferable way.
由于引入了16.2 版（或简称），因此您可以使用条件。这是更可取的方式。<React.Fragment/><></>
return (
<React.Fragment>
<h1>Page title</h1>
<ContentComponent />
{this.props.showFooter && (
<footer>(c) stackoverflow</footer>
)}
</React.Fragment>
)
React 16
反应 16
Since React 16, you can return from the render()method a list of components. The trade of is you cant easily condition the render and need to add keyattribute to each component in the list.
从 React 16 开始，你可以从render()方法返回一个组件列表。交易是您无法轻松调节渲染并且需要为key列表中的每个组件添加属性。
return [
<h1 key="page-title">Page</h1>,
<ContentComponent key="content" />,
<footer>(c)stackoverflow</footer>
]
React < 16
反应 < 16
In older versions of React, you can't render multiple components without wrapping them in an enclosing element (tag, component). eg:
在旧版本的 React 中，如果不将多个组件包装在封闭元素（标签、组件）中，则无法渲染多个组件。例如：
return (
<article>
<h1>title</h1>
<meta>some meta</meta>
</article>
)
If you want to use them realy as just one element, you have to create a module from them.
如果您真的想将它们用作一个元素，则必须从它们创建一个模块。
回答by gyzerok
Just wrap your multiple components into single tag. For example:
只需将您的多个组件包装到单个标签中。例如：
React.render(
<div>
<PanelA />
<PanelB />
</div>,
document.body
);
回答by gabe
Prior to React 16, multiple top-level elements in the same render()would require you to wrap everything in a parent element (typically a <div>):
在 React 16 之前，同一元素中的多个顶级元素render()需要您将所有内容都包装在一个父元素中（通常是 a <div>）：
render () {
return (
<div>
<Thing1 />
<Thing2 />
</div>
)
}
React 16 introduced the ability to render an array of top-level elements (with a warning that they all must have unique keys):
React 16 引入了渲染顶级元素数组的能力（警告它们都必须具有唯一键）：
render () {
return ([
<Thing1 key='thing-1' />,
<Thing2 key='thing-2' />
])
}
React 16.2 introduced the <Fragment>element, which functions exactly like the <div>in the first example but doesn't leave a pointless parent <div>hanging around the DOM:
React 16.2 引入了<Fragment>元素，它的功能<div>与第一个示例中的完全相同，但不会<div>在 DOM 周围留下一个毫无意义的父元素：
import React, { Fragment } from 'react'
...
render () {
return (
<Fragment>
<Thing1 />
<Thing2 />
</Fragment>
)
}
There's a shorthand syntax for it, but it isn't supported by most tooling (e.g., syntax highlighters) yet:
它有一个速记语法，但大多数工具（例如，语法高亮器）尚不支持它：
import React from 'react'
...
render () {
return (
<>
<Thing1 />
<Thing2 />
</>
)
}
回答by JonE
If you wish to render multiple components out you need to nest them within one another in order to maintain the Tree-Like structure. This is explained on their docs page for Multiple Components
如果您希望渲染多个组件，您需要将它们相互嵌套以保持树状结构。这在他们的多组件文档页面上有解释
Ultimately as long as there is one Node at the top level it can work.
最终只要顶层有一个 Node 就可以工作。
You could use just one DOM element such as a <div>
您可以只使用一个 DOM 元素，例如 <div>
<div>
<PanelA />
<PanelB />
</div>
However as you create more complex apps and have more interlinking components you may find it best to wrap child components in a parent like so
但是，当您创建更复杂的应用程序并拥有更多互连组件时，您可能会发现最好像这样将子组件包装在父组件中
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>
)
}
});
And then in your main js file, you would do:
然后在您的主 js 文件中，您将执行以下操作：
import React from 'react';
import PanelHolder from './panelHolder.jsx';
React.render(
<PanelHolder />
document.body
);
回答by ARNALDO G OLIVEIRA
this.propsTextBox.value = this._context.parameters.textBoxProperty.raw || "";
var elements = new Array<React.SFCElement<any>>();
elements.push(React.createElement(
TextField,
this.propsTextBox
));
elements.push(React.createElement(
Label,
this.propsLabel
));
ReactDOM.render(
elements,
this._container
);
回答by Ruchi
React.render(
<PanelA>
<PanelB />
</PanelA>
document.body
);
回答by Ankur Kedia
You can do it like this too.
你也可以这样做。
const list = [item1, item2]
const elements = (
<div>
{list.map(element => element)}
</div>
);
ReactDOM.render(elements, document.body);
