refs не работает, чтобы вызвать детский метод

Question

В проекте реагирования есть два компонента. 1, Родитель 2, Ребенок

Теперь, я хотел бы использовать childMethod в родительском компоненте. На некоторых страницах stackoverflow все говорят, что refs эффективен. Но в моем проекте это не работает.

class Parent extends Component { 
parentMethod(){ 
    this.refs.child.childMethod(); 
} 

render() { 
    return (
    <Child ref='child'/> 
); 
} 
} 



class Child extends Component { 
childMethod() { 
    alert('You made it!'); 
} 
render() { 
    return (
    <h1 ref="hello">Hello</h1> 
); 
} 
} 

Когда я использую код выше, в консоли браузера есть один код ошибки. _this3.refs.child.childMethod не является функцией

Я хотел бы использовать метод ребенка, поэтому у меня есть 2 вопроса. 1, Что такое _this3? Как я могу правильно использовать ссылки? 2, Есть ли у вас другое представление об этом?

Answer 1

class Parent extends React.Component { 

    constructor(props) { 
    super(props); 

    // binding methods to the class so they don't lose 'this' 
    // when invoked from another environment. 
    this.parentMethod = this.parentMethod.bind(this); 
    this.setChildRef = this.setChildRef.bind(this); 
    } 

    parentMethod() { 
    this.childNode.childMethod(); 
    } 

    // intentionally avoided using an arrow fuction inside JSX 
    // for we don't want a new anonymous fn created on every render. 
    setChildRef(node) { // receives reference to component as argument 
    this.childNode = node; 
    } 

    render() { 
    return (
     <div> 
     <Child ref={this.setChildRef}/> 
     <button onClick={this.parentMethod}>Parent Button - Click me :)</button> 
     </div> 
    ); 
    } 
} 

class Child extends React.Component { 
    childMethod() { 
    alert('You made it!'); 
    } 

    render() { 
    return (
     <h1>Child</h1> 
    ); 
    } 
} 

Работа скрипку: https://jsfiddle.net/free_soul/9vrLrw8h/

---

1. Что "_this3"?

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

2. Как правильно использовать ссылки?

   Предпочтительно, чтобы лечить ref как callback attribute и больше не зависит от объекта работ. Если вы используете объект refs Object, избегайте использования доступа к refs компонентов-потомков. Вы должны обрабатывать refs как частный аксессуар , а не часть API-интерфейса компонента. Рассматривайте только методы , выставленные на экземпляр компонента как открытый API.