Как вызвать функцию в многоуровневом дочернем компоненте из родительского компонента в Reactjs, используя компонент класса - PullRequest
Новая
       45

Как вызвать функцию в многоуровневом дочернем компоненте из родительского компонента в Reactjs, используя компонент класса

0 голосов
/ 05 марта 2020

У меня есть требование, при котором я должен вызывать функцию, присутствующую в дочернем компоненте из родительского компонента, используя React.createRef (), но проблема здесь в том, что это многоуровневый дочерний элемент.

Я могу вызвать функцию, присутствующую в компоненте 'ChildComponent1', но не способную вызвать функцию, присутствующую в компоненте 'ChildComponent2', из компонента 'Parent'. Пожалуйста, скажите мне правильный способ сделать это.

Это мой родитель. js file 

import React, { Component } from 'react';
import ChildComponent1 from './ChildComponent1';

class ParentComponent extends Component {
   constructor(props) {
        super(props);
        this.childRef = React.createRef();
    }
    
    callFunctionFromChild = () => {
        this.ref.current.doSomething()
    }
    
    render() {
        return (
            <div>
                <ChildComponent1 ref={this.childRef} />
                <button onClick={()=>{this.callFunctionFromChild()}}> Click Me <button>
            </div>
        );
    }
}

export default ParentComponent;

Это мой файл ChildComponent1. js: 

import React, { Component } from 'react';
import ChildComponent2 from './ChildComponent2';

class ChildComponent1 extends Component {
    render() {
        return (
            <div>
                <ChildComponent2 ref={this.props.ref} />
            </div>
        );
    }
}

export default ChildComponent1;

и это мой внутренний ChildComponent2. js file: 

import React, { Component } from 'react';

class ChildComponent2 extends Component {
    
    doSomething = () => {
        console.log("Something is done!!");
    }
    
    render() {
        return (
            <div>
                My Child Component
            </div>
        );
    }
}

export default ChildComponent2;
...