javascript - 如何在JavaScript函数中访问多个上下文(React.Component类方法)

我有React组件，它渲染了第三方HoC HotTable。
HotTable上具有方法afterValidate。

我正在将handleAfterValidate函数传递给HotTable。
问题在于，handleAfterValidate应该有权访问HotTable实例，并且同时有权访问HotTableWrapper实例（请参见下面的代码）。

默认情况下，this中的handleAfterValidate引用HotTable实例。
如果我将处理程序绑定到React实例，那么我将失去对HotTable实例的访问权限，但是我同时需要它们。

在这种情况下是否可以访问两个上下文？

class HotTableWrapper extends React.Component {
processCell(row, col) {
    // do something
}

handleAfterValidate(row, prop) {
    const col = this.propToCol(prop); // 'this' should refer to HotTable instance
    this.processCell(row, col); // 'this' should refer to HotTableWrapper class instance
}

render() {
    return (
        <div>
            <HotTable afterValidate={this.handleAfterValidate} />
        </div>
    );
}

}

最佳答案

您可以使用currying函数方法。如果船上有lodash，则可以这样操作：

class HotTableWrapper extends React.Component {
    processCell(row, col) {
        // do something
    }

    handleAfterValidate(wrapper, row, prop) {
        const col = this.propToCol(prop); // 'this' should refer to HotTable instance
        wrapper.processCell(row, col); // 'this' should refer to HotTableWrapper class instance
    }

    render() {
        return (
            <div>
                <HotTable afterValidate={_.curry(this.handleAfterValidate)(this)} />
            </div>
        );
    }
}

https://lodash.com/docs/4.17.4#curry
如果您没有lodash，只需在Google上搜索如何实现帮助咖喱的方法。