反应技巧—高阶组件

简而言之,高阶组件是一个接受一个组件并返回一个新组件的函数,仅此而已。

有时您可能希望扩展组件以提供更多功能,但由于多种原因,不想直接在其上添加组件。 让我们来看一个例子:

 // HoC用于检查身份验证导入React,{组件}来自'react'; 
从'react-redux'导入{connect};导出默认值( ComposedComponent )=> {
类RequireAuth扩展了Component {componentWillMount(){
如果(!this.props.authenticated)
this.props.history.replace(“ /”);
} componentWillUpdate(){
如果(!this.props.authenticated)
this.props.history.replace(“ /”);
} render(){
返回(
< ComposedComponent {... this.props} />

}
}函数mapStateToProps({auth:{authenticated}}){
返回{
已认证
}
} return connect(mapStateToProps)(RequireAuth);
}

在此示例中,我们创建了一个函数,该函数接收一个组件作为参数,并检查(通过Redux)用户是否已通过身份验证,如果未重定向到“ /”,则该函数为:

在此示例中, connect还是一个高级订单组件,它使我们的组件可以通过Redux访问商店和动作创建者。

如您所见,我们没有在原始组件中添加任何新行为,但是只有在对用户进行身份验证的情况下,它才会呈现。 这是保护只能在用户登录后才能访问的组件的一种方法。让我们看看如何使用此HoC:

在上面的示例中,仅当用户通过身份验证后才能访问Stores,StoreProducts,Cart和OrderList组件。

谢谢,

高阶组件– React

高阶组件(HOC)是React中用于重用组件逻辑的高级技术。 HOC不属于……

reactjs.org