Блог

Я работаю над проектом, который использует «react-notification-оповещение» от creativetim. В своем документе они показывают пример использования своего оповещения. В основном это работает с this.ref, но я знаю, что он устарел, поэтому я попытался заменить его с помощью createRef(), как показано ниже:

 class App extends Component {
    constructor(props);
    this.notifRef = React.createRef();

    myFunc(){
        this.notifRef.current.notify.notificationAlert(options);
    }

  render() {
    return (
      <div>
          <NotificationAlert ref={this.notifRef} />
        <button onClick={() => this.myFunc()}>Hey</button>
      </div>
    );
  }
}
  

Но проблема в том, что консоль показывает мне

Не удается прочитать свойство ‘notificationAlert’ для undefined

Я перепробовал много решений и видел много ответов в stack, но мне трудно понять, как это может работать.

Спасибо за вашу помощь!

Основное различие между строковыми константами и createRef заключается в том, что createRef хранит данные в current поле, поскольку строковая константа хранит их в this.refs[stringConstant].

Таким образом, ваш код может быть:

 class App extends Component {
    constructor(props) {
      this.notifRef = React.createRef();
    }
    myFunc(){
        this.notifRef.current.notificationAlert(options);
    }

  render() {
    return (
      <div>
          <NotificationAlert ref={this.notifRef} />
        <button onClick={() => this.myFunc()}>Hey</button>
      </div>
    );
  }
}  

Попробуйте это:

 class App extends Component {
  constructor(props){
     super();
     this.myFunc = this.myFunc.bind( this );
  }

  myFunc(){
     this.notifRef.current.notify.notificationAlert(options);
  }

  render() {
    return (
      <div>
        <NotificationAlert ref={ e=> this.notifRef = e } />
        <button onClick={ this.myFunc }>Hey</button>
      </div>
    );
  }
}