有没有办法在 React.render() 函数中渲染多个 React 组件?
Is there a way to render multiple React components in the React.render() function?
例如我可以这样做:
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 转译
如果您希望渲染多个组件,您需要将它们相互嵌套以保持树状结构。这在 Multiple Components
的文档页面上进行了解释
最终只要顶层有一个Node就可以了
您可以只使用一个 DOM 元素,例如 <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
);
只需将您的多个组件包装到一个标签中。例如:
React.render(
<div>
<PanelA />
<PanelB />
</div>,
document.body
);
反应 >= 16.2
自16.2版本引入<<a href="https://reactjs.org/docs/fragments.html" rel="nofollow noreferrer">React.Fragment</a> />
(简称<></>
),可以使用条件
这是更好的方式。
return (
<React.Fragment>
<h1>Page title</h1>
<ContentComponent />
{this.props.showFooter && (
<footer>(c) Whosebug</footer>
)}
</React.Fragment>
)
反应 16
从 React 16 开始,您可以从 render()
方法中 return 组件列表。代价是您无法轻松调整渲染,需要向列表中的每个组件添加 key
属性。
return [
<h1 key="page-title">Page</h1>,
<ContentComponent key="content" />,
<footer>(c)Whosebug</footer>
]
反应 < 16
在旧版本的 React 中,如果不将多个组件包装在封闭元素(标签、组件)中,则无法渲染它们。
例如:
return (
<article>
<h1>title</h1>
<meta>some meta</meta>
</article>
)
如果你真的想把它们作为一个元素来使用,你必须从它们创建一个模块。
自 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 版本开始您可以使用 Fragments
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
中呈现单个组件,并在内部组件中呈现项目数组。
在 React 16 之前,同一个 render()
中的多个顶级元素需要您将所有内容包装在父元素中(通常是 <div>
):
render () {
return (
<div>
<Thing1 />
<Thing2 />
</div>
)
}
React 16 引入了呈现顶级元素数组的能力(警告它们都必须具有唯一键):
render () {
return ([
<Thing1 key='thing-1' />,
<Thing2 key='thing-2' />
])
}
React 16.2 引入了 <Fragment>
元素,其功能与第一个示例中的 <div>
完全相同,但不会在 [=27= 周围留下无意义的父元素 <div>
]:
import React, { Fragment } from 'react'
...
render () {
return (
<Fragment>
<Thing1 />
<Thing2 />
</Fragment>
)
}
它有一个 shorthand 语法,但大多数工具(例如语法荧光笔)尚不支持它:
import React from 'react'
...
render () {
return (
<>
<Thing1 />
<Thing2 />
</>
)
}
你也可以这样做。
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
);
例如我可以这样做:
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 转译
如果您希望渲染多个组件,您需要将它们相互嵌套以保持树状结构。这在 Multiple Components
的文档页面上进行了解释最终只要顶层有一个Node就可以了
您可以只使用一个 DOM 元素,例如 <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
);
只需将您的多个组件包装到一个标签中。例如:
React.render(
<div>
<PanelA />
<PanelB />
</div>,
document.body
);
反应 >= 16.2
自16.2版本引入<<a href="https://reactjs.org/docs/fragments.html" rel="nofollow noreferrer">React.Fragment</a> />
(简称<></>
),可以使用条件
这是更好的方式。
return (
<React.Fragment>
<h1>Page title</h1>
<ContentComponent />
{this.props.showFooter && (
<footer>(c) Whosebug</footer>
)}
</React.Fragment>
)
反应 16
从 React 16 开始,您可以从 render()
方法中 return 组件列表。代价是您无法轻松调整渲染,需要向列表中的每个组件添加 key
属性。
return [
<h1 key="page-title">Page</h1>,
<ContentComponent key="content" />,
<footer>(c)Whosebug</footer>
]
反应 < 16
在旧版本的 React 中,如果不将多个组件包装在封闭元素(标签、组件)中,则无法渲染它们。 例如:
return (
<article>
<h1>title</h1>
<meta>some meta</meta>
</article>
)
如果你真的想把它们作为一个元素来使用,你必须从它们创建一个模块。
自 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 版本开始您可以使用 Fragments
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
中呈现单个组件,并在内部组件中呈现项目数组。
在 React 16 之前,同一个 render()
中的多个顶级元素需要您将所有内容包装在父元素中(通常是 <div>
):
render () {
return (
<div>
<Thing1 />
<Thing2 />
</div>
)
}
React 16 引入了呈现顶级元素数组的能力(警告它们都必须具有唯一键):
render () {
return ([
<Thing1 key='thing-1' />,
<Thing2 key='thing-2' />
])
}
React 16.2 引入了 <Fragment>
元素,其功能与第一个示例中的 <div>
完全相同,但不会在 [=27= 周围留下无意义的父元素 <div>
]:
import React, { Fragment } from 'react'
...
render () {
return (
<Fragment>
<Thing1 />
<Thing2 />
</Fragment>
)
}
它有一个 shorthand 语法,但大多数工具(例如语法荧光笔)尚不支持它:
import React from 'react'
...
render () {
return (
<>
<Thing1 />
<Thing2 />
</>
)
}
你也可以这样做。
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
);