在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在您的应用程序中具有最新版本。