React 15.4.2 Невозможно прочитать свойство 'ref' от нуля

Question

Я пытаюсь получить доступ к методу дочернего компонента. Это выглядеть: 1.Called метод по реф имя компонента, а затем методом

Form.js

this.ref.details.getDataFromComponent(); 
    <Details 
     pointToShow={this.state.point} 
     ref="details" 
    /> 

Details.js

getDataFromComponent() { 
    //do my stuff get state and connect to get data for component Details 
} 

Все время У меня есть «Uncaught TypeError: Невозможно прочитать свойство« ref »от нуля» Реакция 15.4.2

Answer 1

Чтобы получить доступ к компонентам, вам необходимо использовать this.refs, а не this.ref.

Однако, похоже, это не проблема, поскольку ошибка явно говорит о том, что this - это null, когда вы пытаетесь получить к нему доступ. Чтобы определить, почему это нужно, мы должны увидеть больше вашего кода.

---

Вы также должны смотреть в задающих рефов не используя ref callback attribute вместо того, как вы делаете это, поскольку этот синтаксис не рекомендуется и может быть удалена в будущих версиях.

Answer 2

Как Timo затронуло для доступа к элементу с помощью refs вы должны вы должны написать this.refs...

По ошибке вы не имеете доступа к this. Скорее всего, вы вызываете this.ref.details.getDataFromComponent(); внутри метода, не имеющего доступа к this

Например, вы пишете:

callRef() { 
    this.ref.details.getDataFromComponent(); 
    .... 
} 

Если да, то вы не имеете доступа к this там. Вы должны привязать свою функцию к this.
Вы можете использовать функцию стрелки для автоматических затруднительных с this:

callRef =() => { 
    this.ref.details.getDataFromComponent(); 
    .... 
} 

Примечания: Для использования функции стрелки необходимо использовать Бабель загрузчик в конфигурации WebPack.

Или вы можете связываться при вызове метода. Например, вы должны вызвать метод callRef() внутри JSX кодов, как это:

< ... onClick={this.callRef.bind(this)} />