如何在 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 添加引用，然后找到 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}
               />
            }
        }
    }
}

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

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

然后在 WrappedComponent

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

如何在 HOC 中使用 refs？

How to use refs over an HOC in react?

ref

reactjs

higher-order-components