Вызов дочернего метода от родителя

Question

У меня есть два компонента.

1. Родитель компонент
2. Детский компонент

Я пытался вызвать метод ребенка от Родителя, я попробовал этот путь, но не мог получить результат

class Parent extends Component { 
    render() { 
     return (
     <Child /> 
     <button onClick={Child.getAlert()}>Click</button> 
    ); 
    } 
    } 

    class Child extends Component { 
    getAlert() { 
     alert('clicked'); 
    } 
    render() { 
     return (
     <h1 ref="hello">Hello</h1> 
    ); 
    } 
    } 

Есть способ вызова метода child из родителя?

Примечание: родительская и компоненты находятся в двух разных файлах

Answer 1

Вы можете использовать refs.

class Parent extends Component { 
render() { 
    return (
    <div> 
     <Child ref="child" /> 
     <button onClick={() => this.refs.child.getAlert()}>Click</button> 
    </div> 
); 
} 
} 

class Child extends Component { 
getAlert() { 
    alert('clicked'); 
} 
render() { 
    return (
    <h1>Hello</h1> 
); 
} 
} 

Demonstration here

---

Редактировать

Струнные рефов, вероятно, будут устаревшими в будущем, так вот, как вы могли бы сделать это с callback refs:

const { Component } = React; 
 
const { render } = ReactDOM; 
 

 
class Parent extends Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <Child ref={instance => { this.child = instance; }} /> 
 
     <button onClick={() => { this.child.getAlert(); }}>Click</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class Child extends Component { 
 
    getAlert() { 
 
    alert('clicked'); 
 
    } 
 

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

 

 
render(
 
    <Parent />, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Answer 2

https://facebook.github.io/react/tips/expose-component-functions.html для больше ответов реф здесь Call methods on React children components

Посмотрев в работах «разума» компонент, вы нарушаете инкапсуляцию и делает его невозможным, чтобы реорганизовать этот компонент без тщательного изучения всех где он используется. Из-за этого мы настоятельно рекомендуем рассматривать refs как частные для компонента, как и состояние.

В общем, данные должны передаваться по дереву через опоры. Есть несколько исключений из этого (например, вызов .фокуса() или запуск одноразовой анимации, которая на самом деле не «изменяет» состояние), но в любое время, когда вы подвергаете метод «set», реквизиты обычно лучший выбор. Постарайтесь сделать так, чтобы внутренний компонент ввода беспокоился о его размере и внешности, чтобы ни один из его предков не делал.

Answer 3

Вы можете использовать другой шаблон здесь:

class Parent extends Component { 
render() { 
    return (
    <div> 
     <Child setClick={click => this.clickChild = click}/> 
     <button onClick={() => this.clickChild()}>Click</button> 
    </div> 
); 
} 
} 

class Child extends Component { 
componentDidMount() { 
    this.props.setClick(this.getAlert) 
} 
getAlert() { 
    alert('clicked'); 
} 
render() { 
    return (
    <h1 ref="hello">Hello</h1> 
); 
} 
} 

Что она делает это, чтобы установить метод clickChild родителя, когда ребенок установлен. Таким образом, когда вы нажимаете кнопку в родительском, она вызывает callChild, которая вызывает getAlert для child.

Это также работает, если ваш ребенок обернут соединением(), поэтому вам не нужен взлом getWrappedInstance().

Обратите внимание, что вы не можете использовать onClick = {this.clickChild} в родительском объекте, потому что, когда родитель выведен, дочерний объект не установлен, поэтому this.clickChild еще не назначен. Использование onClick = {() => this.clickChild()} отлично, потому что, когда вы нажимаете кнопку this.clickChild, уже должны быть назначены.