数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学React.js 和高阶组件 (HOC) 中返回相邻元素
通常，React 的 render 方法中的 return 语句返回一个包含所有子 JSX 的单个 div 元素，如下所示：
render(){
return (
<div>
<h2>Header</h2>
<p>Test</p>
</div>
);
}我们不能简单地返回多个元素，我们需要一个类似于上面 div 的父容器。
如果没有父容器元素，我们甚至可以返回一个数组，如下所示：
返回数组时，我们需要为数组的每个元素提供一个唯一的 key。
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;此组件现在是一个可重用的组件。我们可以将类作为 props 传递给 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 展开运算符将 props 传递给子组件。
这里我们返回一个函数式组件，但我们也可以返回一个有状态的类组件。
const wrapperComponent =(ChildComponent, classes)=>{
render(){
return class extends Component{
<div className={classes}>
<ChildComponent {…this.props}/>
</div>
}
}
}在基于类的组件的情况下，通常使用 {...this.props} 将 props 传递给子组件。将 props 传递给子组件对于维护它们与该组件上的传入 props 之间的链接是必要的。
请注意，我们返回的是一个匿名类，因此关键字 class 后面没有任何名称。
虽然不应该在这里操作我们包装在 div 内的 ChildComponent。
现在，我们可以包装我们的 ChildComponent 并传递 CSS 类，如下所示：
render(){
return (
< div>
<h2>Header</h2>
<p>Test</p>
</ div >
);
}
export default wrapperComponent(App, classes.App);许多第三方库使用 HOC 功能（如 Redux）来为 React 组件提供附加功能。
使用 React.Fragment
现在，为了返回多个元素，我们使用了 div、数组或自定义 React HOC 组件。React 团队在最新版本中将其作为内置功能推出。
因此，我们可以像这样使用它：
return( <React.Fragment> //multiple or single jsx code </React.Fragment> )
React.Fragment 的简写形式是 <>
return( < > //multiple or single jsx code </ > )
但在使用此功能之前，请确保您的应用程序中 React 具有最新版本。
250 次浏览
