javascript - 如何使用 'this.pros.function'调用组件上下文中运行的函数？

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 4 年前。

我想写一个npm包somePackage 。现在我编写另一个代码来使用这个包。如果自定义代码写functionA ，我会使用自己 ​​functionA ，否则我将使用 functionA在这个包中。但我没能定制functionA运行在 somePackage上下文。

class somePackage extends React.Component{
    constructor(props)
    {
        super(props);
    }

    functionA () {
        if (this.props.functionA)
            this.props.functionA.call(this);
        ...some other codes...
    }
}

class customComponent extends React.Component{
    ...
    functionA(){
        this.setState(state => ({ tags: [...this.state.tags, tag] }));
    }

    render(){
        return (<somePackage/>)
    }
}

我希望this.props.functionA.call(this)可以使this.props.functionA运行在 somePackage上下文，但它实际上是在 customComponent 中运行语境。这个this指针仍然指向customComponent。

Answer 1

改用箭头函数语法:

    functionA = () => { // arrow function allows "this" to refer to the class when the function is called
        if (this.props.functionA)
            this.props.functionA.call(this);
        ...some other codes...
    }