Question

我有一个包裹在HOC中的反应组件，它将道具传递给包裹的孩子。当孩子的构造函数被调用时，它会做一些工作然后它执行从HOC传递到道具中的回调。此回调更新HOC构造函数中的属性（定义）（我认为这是正确的语言）。然后，HOC使用更新的定义为HOC及其包装的子项设置订阅。

我这样做的原因是子接收来自其父级的道具，其中包含动态数组的对象，这些对象在安装组件时需要订阅，并且在实例化HOC时无法知道这些订阅是什么。

HOC正在调用setState，它会重新渲染孩子，但我知道这是一种反模式。我怎么能解决这个问题？

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 with props received from it's parent (not HOC)       
    props.handleData(props.data)
  }
  render() {
    <div>Hello!</div>
  }
}

Answer 1

您可以使用forceUpdate方法。

如果您调用this.forceUpdate()，组件内将重新呈现该组件。

如何在没有调用componentDidMount中的setState的情况下重新安装React组件

1 个答案: