高階組件本質(zhì)是函數(shù)眷柔,參數(shù)是 組件1 返回組件2江咳,高階組件是為了復(fù)用通用邏輯
高階組件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