在React.js和HOC中返回相邻元素
通常，React的render方法中的return语句返回一个div元素，其中包含所有子jsx，如下所示-
render(){
return (
<div>
<h2>Header</h2>
<p>Test</p>
</div>
);
}这里我们不能简单地返回多个元素，我们需要有一个类似于div的父容器，如上所示。
如果没有父容器元素，那么我们甚至可以返回如下数组：
返回数组时，我们需要为数组的每个元素赋予唯一键
render(){
return (
[
<p key=”1”>Paragraph 1</p>,
<p key=”2”>Paragraph 2</p>
]
);
}但是，使用数组无法提供可在包装div元素上执行的css类。
解决上述问题的方法是使用高阶分量(hoc)。通过hoc，我们可以为组件提供附加功能，例如向其添加一些CSS类。
使用高阶分量
创建一个简单的功能组件
import React from ‘react’; const wrapperComponent = (props)=> props.children export default wrapperComponent;
在上面的代码示例中，使用上述wrapperComponent代替div元素
import wrapperComponent from ‘wrapperComponent’;
render(){
return (
< wrapperComponent >
<h2>Header</h2>
<p>Test</p>
</ wrapperComponent >
);
}现在可以通过该wrapperComponent添加css类，让我们来看看如何做。
我们可以在wrapperComponent中添加css类，如下所示：
import React from ‘react’;
const wrapperComponent = (props)=> {
return (
<div classes={props.classes}>
{props.children}
</div>
)
}
export default wrapperComponent;现在，此组件是可重用的组件。我们可以将类作为道具传递给wrapperComponent。
render(){
return (
< wrapperComponent classes={classes.App}>
<h2>Header</h2>
<p>Test</p>
</ wrapperComponent >
);
}编写HOC的另一种替代方法
const wrapperComponent =(ChildComponent, classes)=>{
return (props)={
<div className={classes}>
<ChildComponent {…props}/>
</div>
}
}
export default wrapperComponent;使用es6传播运算符将道具传递给子组件。
在这里，我们返回一个功能组件，但是我们也可以返回一个有状态的类组件。
const wrapperComponent =(ChildComponent, classes)=>{
render(){
return class extends Component{
<div className={classes}>
<ChildComponent {…this.props}/>
</div>
}
}
}在基于类的组件的情况下，通常使用{…this.props}传递道具。必须将道具传递给子组件，以保持它们与该组件上即将出现的道具的链接。
请注意，我们正在返回一个匿名类，因此在关键字class之后没有任何名称。
我们包装在div中的ChildComponent不应在此处进行操作。
现在，我们可以包装我们的ChildComponent并传递css类，如下所示：
render(){
return (
< div>
<h2>Header</h2>
<p>Test</p>
</ div >
);
}
export default wrapperComponent(App, classes.App);许多第三方库使用像Redux这样的hoc功能来提供附加功能来响应组件。
使用React.Fragment
现在，为了返回多个元素，我们使用了div，数组或自定义reacthoc组件。ReactTeam在最新版本中提出了内置功能。
所以我们可以将其用作-
return(
<React.Fragment>
//multiple or single jsx code
</React.Fragment>
)较短版本的React.Fragment是<>
return(
< >
//multiple or single jsx code
</ >
)但是在使用此功能之前，请确保React在您的应用程序中具有最新版本。