如何使用类组件从Reactjs的父组件中调用多级子组件中的函数

Question

我有一个要求，我必须使用React.createRef（）从父组件中调用子组件中存在的函数，但是这里的问题是它是多级子组件。

我能够调用'ChildComponent1'组件中存在的函数，但是无法从'Parent'组件中调用'ChildComponent2'组件中存在的函数。请告诉我正确的方法。

这是我的parent.js文件

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文件：

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;