Как использовать ссылки через HOC в реакции? - PullRequest
Новая
       94

Как использовать ссылки через HOC в реакции?

0 голосов
/ 12 октября 2018

У меня есть компонент (обернутый HOC), который монтируется в моем приложении в нескольких местах.Я должен добавить некоторые пользовательские события, такие как drag, dragLeave и т. Д., Используя node.addEventListener в ComponentDidMount, и необходимо удалить их в ComponentWillUnmount.Я попытался дать ссылку на 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 здесь

1 Ответ

0 голосов
/ 12 октября 2018

Добавьте ссылку в 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}
               />
            }
        }
    }
}

Другой способ - передать prop innerRef в WrappedComponent и оставить его в wrappedComponent для передачи ссылки в узел DOM.

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

А потом в WrappedComponent 

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