Как использовать createRef () вместо this.refs? - PullRequest
Новая
       96

Как использовать createRef () вместо this.refs?

0 голосов
/ 13 марта 2019

Я работаю над проектом, который использует «ответ-уведомление-предупреждение" от 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>
    );
  }
}

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

Невозможно прочитать свойство 'alertAlert' из неопределенного

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

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

Ответы [ 2 ]

2 голосов
/ 13 марта 2019

Основное различие между строковыми константами и 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>
    );
  }
}
0 голосов
/ 13 марта 2019

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

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>
    );
  }
}
...