React高阶组件HOC

高阶组件本质是函数,参数是 组件1 返回组件2,高阶组件是为了复用通用逻辑
高阶组件eg:
import React, { Component } from 'react';

const withPersistentData = data => WrappedComponent => {

return class extends Component {
constructor(props) {
super(props);
}
render() {
return (
<WrappedComponent data={data} />
)
}
}
}
export default withPersistentData
尝试用定义好的高阶组件
import React, { Component } from 'react';
import HighComponent from './HighComponent';

class LowComponent extends Component {
constructor(props) {
super(props);
}

render() {
return (
<div>{this.props.data}</div>
)
}
}

const MyComponent = HighComponent('Hello')(LowComponent)
export default MyComponent

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容