例如我可以这样做吗：
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进行转录时
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内部渲染单个组件，并在内部组件中渲染项目数组。
<> ... </>语法被称为什么？我知道我以前见过类似的东西，但就是想不起来该怎么在谷歌上搜索。 - undefined自版本16.2以来，引入了<React.Fragment />（或简写为<></>），因此可以使用条件。
这是更可取的方式。
return (
<React.Fragment>
<h1>Page title</h1>
<ContentComponent />
{this.props.showFooter && (
<footer>(c) stackoverflow</footer>
)}
</React.Fragment>
)
自从 React 16 版本以后，你可以在 render() 方法中返回一个组件列表。但是这种做法的弊端是你无法轻松地对渲染进行条件控制，因此需要为列表中的每个组件添加 key 属性。
return [
<h1 key="page-title">Page</h1>,
<ContentComponent key="content" />,
<footer>(c)stackoverflow</footer>
]
在旧版本的React中，您不能渲染多个组件而不将它们包装在一个封闭元素（标签、组件）中。
例如：
return (
<article>
<h1>title</h1>
<meta>some meta</meta>
</article>
)
如果你想将它们作为单一元素使用，你需要从它们中创建一个模块。
只需将多个组件包装在单个标签中即可。例如：
React.render(
<div>
<PanelA />
<PanelB />
</div>,
document.body
);
在React 16之前，同一个render()中有多个顶层元素需要你将它们包裹在一个父元素内（通常是一个<div>）:
render () {
return (
<div>
<Thing1 />
<Thing2 />
</div>
)
}
React 16引入了渲染顶级元素数组的功能（需要警告的是，它们必须都有唯一的键）:
React 16引入了能够呈现顶层元素数组的能力（附带警告，它们全部必须具有唯一的键）：
render () {
return ([
<Thing1 key='thing-1' />,
<Thing2 key='thing-2' />
])
}
React 16.2 引入了 <Fragment> 元素，其与第一个示例中的 <div> 具有相同的功能，但不会在 DOM 中留下无意义的父级 <div>：
import React, { Fragment } from 'react'
...
render () {
return (
<Fragment>
<Thing1 />
<Thing2 />
</Fragment>
)
}
有一种简写语法，但大多数工具（例如语法高亮器）尚未支持它：
import React from 'react'
...
render () {
return (
<>
<Thing1 />
<Thing2 />
</>
)
}
<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
);
const list = [item1, item2]
const elements = (
<div>
{list.map(element => element)}
</div>
);
ReactDOM.render(elements, document.body);
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
);
React.render(
<PanelA>
<PanelB />
</PanelA>
document.body
);
document.body中会抛出警告（尽管许多教程都是这么做的），而应该通过id选择一个元素。https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#new-helpful-warnings - David Gilbertson{myVar}<br/>仍然需要包装器。此外，在嵌套场景中也会出现，例如<p>{lines.map(line => ({line}<br/>))}</p>即使存在顶级<p>，也仍然需要一个包装器。因此，显然从JavaScript切换到嵌入式JSX时，JSX部分必须返回单个节点。请参见我的问题https://stackoverflow.com/q/75783783。 - Garret Wilson