在子函数中使用父函数

Question

我正在尝试使用子组件的参数调用父函数，但我不确定如何让它正常工作。我特别需要能够在另一个函数中从子函数调用父函数，所以我尝试通过 props 传递对该函数的引用，但这不太正确。父 class 拥有一个资源，只有它应该通过我传递的特定函数调用与之交互。按以下方式完成后，我被告知函数未定义。

export class ParentClass extends React.Component {

    ParentFunctionWithArguments(a, b) {
        alert("a is being used by my private resource");
        alert("b is being used by my private resource");
        return true; //some result based on a and b
    }

    render() {
        return (
            <ChildClass>ParentFunctionWithArguments={() => this.ParentFunctionWithArguments()}</ChildClass>
        );
    }
}

和

export class ChildClass extends React.Component {
    ...
    handleOk = (e) => {
        ...
        if (condition) {
            if (this.props.ParentFunctionWithArguments(a, b)) {}
        }
        ...
    };
    ...
}

Answer 1

<childComponent callFromChild={this.parentMethod}/>


//in child component call like below
this.props.callFromChild()

Answer 2

您只需要将 parent 函数用作 Child 组件的属性，而不是在 children

中调用它

export class ParentClass extends React.Component {

    ParentFunctionWithArguments(a, b) {
        alert("a is being used by my private resource");
        alert("b is being used by my private resource");
        return true; //some result based on a and b
    }

    render() {
        return (
            <ChildClass ParentFunctionWithArguments={this.ParentFunctionWithArguments}></ChildClass>
        );
    }
}

并简单地在 child 中调用它，例如

export class ChildClass extends React.Component {

    handleOk = (e) => {
        ...
        if (condition) {
            if (this.props.ParentFunctionWithArguments(a, b)) {}
        }
        ...
    };

    ...
}

Answer 3

我要找的是 "bind" 函数

parent:

的构造函数中类似这样的东西

export class ParentClass extends React.component {
    constructor() {
        this.ParentFunctionWithArguments = this.ParentFunctionWithArguments.bind(this);
    }
    ... //rest unchanged
}

这将允许 child 在 vanilla react 中使用传入的 parent 函数。

在子函数中使用父函数

Use a parent function inside a child function

javascript

function

parent-child

reactjs