在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，数组或自定义react hoc组件。React Team在最新版本中提出了内置功能。

所以我们可以将其用作-

return(
   <React.Fragment>
      //multiple or single jsx code
   </React.Fragment>
)

较短版本的React.Fragment是<>

return(
   < >
      //multiple or single jsx code
   </ >
)

但是在使用此功能之前，请确保React在您的应用程序中具有最新版本。