我有一个包装在 HOC 中的 React 组件。HOC 会在其中建立一个订阅,该订阅componentDidMount
会导致 HOC 在调用 HOC 的setState
函数时重新呈现,从而重新呈现包装的组件。这类似于 Redux Connect 的工作方式。
我遇到的问题是包装组件(子组件)负责提供 HOC 的数据,这些数据需要建立订阅。它来自传递给孩子的道具。
我可以从控制台看到,componentDidMount
直到执行包装的(子)组件才从 HOC 调用componentDidMount
。
创建一个处理程序方法允许被包装的组件使用更新 HOC 的类属性是否可以接受this.data = data
?
这将允许 HOC 使用来自包装组件的数据来设置订阅。
HOC
const HOCComponent= function HOCComponent(config) {
return function returnWrapped(Wrapped) {
return class Wrapper extends Component {
constructor(props) {
this.handleData = this.handleData.bind(this)
this.data = {}
}
comonentDidMount() {
setSubscription(this.data, () => {
this.setState({
key: getData(),
})
})
}
handleData(data) {
this.data = data
}
render () {
<Wrapped handleData={this.handleData} />
}
}
}
}
孩子
const Component class Wrapper extends Component {
constructor(props) {
// Stuff
props.handleData(props.data)
}
render() {
<div>Hello!</div>
}
}
在上面,props.handleData
也可以从componentDidMount
孩子的内部调用。