Как использовать ссылки с HOC для подключения к Response-Redux на двух компонентах? - PullRequest
Новая
       7

Как использовать ссылки с HOC для подключения к Response-Redux на двух компонентах?

0 голосов
/ 27 сентября 2018

У меня есть два компонента, которые оба используют соединение HOC. 

import {connect} from "react-redux";
import ComponentB from "./ComponentB";
 
class ComponentA extends Component {
  render(){
    return {
        <div>
      <button
       onClick={this.refs.ComponentB.showAlert()}
      >
       Button
      </button>

      <ComponentB
       ref={instance => {
          this.ComponentB = instance.getWrappedInstance();
       }}
      />

    </div>
    }
  }
}

export default connect(mapStateToProps, {}, null, {withRef: true})(ComponentA)

При наличии ComponantA с подключенным HOC выдается ошибка «Ошибка типа: невозможно прочитать свойство 'getWrappedInstance' of null" 

   export default ComponantA;

Если не использовать HOC, я не получу эту ошибку. 

import {connect} from "react-redux";
class ComponentB extends Component {
 showAlert = () => {
    alert("Please Work");
  }
 
render(){
 return {
     <div>ComponentB</div>
    }
  }
}
 
export default connect(mapStateToProps, {}, null, {withRef: true})(ComponentB)

1 Ответ

0 голосов
/ 27 сентября 2018

React.createRef был введен в React 16.3 и должен использоваться следующим образом: 

this.componentBRef = React.createRef();
...

  <button
   onClick={() => this.componentBRef.current.getWrappedInstance().showAlert()}
  >
   Button
  </button>

  <ComponentB
   ref={this.componentBRef};
   }}
  />

Как объяснено в в этом ответе , шаблон, используемый в createRef, позволяет ленивоПолучите доступ к свойству ref через current, поскольку this.componentBRef.current изначально null.

Поскольку Redux используется, есть вероятность, что взаимодействие между компонентами должно выполняться вместо Redux.

...