reactjs - 如何在 HOC 中使用 refs？

Question

我有一个组件(用 HOC 包装)，它被安装在我的应用程序的几个地方。我必须添加一些自定义事件，例如 drag、dragLeave 等。使用 ComponentDidMount 中的 node.addEventListener 和需要在 ComponentWillUnmount 中删除它们。我尝试将 ref 提供给 HOC(它安装 WrapperComponent 的地方)，但它给了我一个错误，即 node.addEventListener 不是一个函数，因为它给我一个组件的实例，而不是这个的 DOM 节点HOC。如何使用 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}
               />
            }
        }
    }
}

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

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

然后在 WrappedComponent 中

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