1

我有一个包装在 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孩子的内部调用。

4

0 回答 0