1

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

我能够调用“ChildComponent1”组件中存在的函数，但无法从“父”组件调用“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;

4

0 回答 0