Question

我有一个包含在HOC中的React组件。 HOC在componentDidMount内建立订阅，导致HOC在调用HOC的setState函数时重新呈现，这将重新呈现包装的组件。这与Redux Connect的工作方式类似。

我遇到的问题是包装组件（子）负责提供HOC所需的数据，这是建立订阅所需要的。它来自传递给孩子的道具。

我可以从控制台看到，在执行包装（子）组件componentDidMount之前，不会从HOC调用componentDidMount。

创建一个允许包装组件使用this.data = data来更新HOC的类属性的处理程序方法是否可以接受？

这将允许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。

如何在HOC执行componentDidMount之前更新React HOC？

0 个答案: