如何在 HOC 上使用 refs 进行反应？

Question

我有一个组件（用 HOC 包装），它安装在我的应用程序的多个位置。我必须在ComponentDidMount 中使用node.addEventListener 添加一些自定义事件，例如drag、dragLeave 等，并且需要在ComponentWillUnmount 中删除它们。我尝试将 ref 提供给 HOC（它安装 WrapperComponent 的位置），但它给了我一个错误，node.addEventListener 不是一个函数，因为它给了我一个组件的实例，而不是这个 HOC 的 DOM 节点。如何使用refs 解决这个问题？

这就是我的 HOC 的样子：

export default function Connector() {
    return function wrap(WrappedComponent) {
        class MyComponent extends PureComponent {
            componentDidMount(){
                //find node here and attach event listener
            }
            componentWillUnmount(){
                //remove event listener
            }
            ....
            render() {
               <WrappedComponent 
                   {...this.props}
               />
            }
        }
    }
}

编辑 我不想在这里使用ReactDOM.findDOMNode

Answer 1

给 WrappedComponent 添加一个 ref，然后找到 DOM 实例

export default function Connector() {
    return function wrap(WrappedComponent) {
        class MyComponent extends PureComponent {
            componentDidMount(){
                //find node here and attach event listener
                this.node = ReactDOM.findDOMNode(this.componentRef);

            }
            componentWillUnmount(){
                //remove event listener
            }

            ....
            render() {
               <WrappedComponent 
                   {...this.props}
                   ref={(ref) => this.componentRef = ref}
               />
            }
        }
    }
}

另一种方法是将prop innerRef 传递给 WrappedComponent 并将其留给 WrappedComponent 以将 ref 传递给 DOM 节点

   <WrappedComponent 
        {...this.props}
        innerRef={(ref) => this.componentRef = ref}
   />

然后在 WrappedComponent 中

 render() {
     return (
        <div ref={this.props.innerRef}>{/* */}</div>
     )
  }