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

Question

我有 React 组件，它呈现第 3 方 HoC HotTable。HotTable 上有方法 afterValidate。

我正在将 handleAfterValidate 函数传递给 HotTable。问题是 handleAfterValidate 应该可以访问 HotTable 实例，同时可以访问 HotTableWrapper 实例(参见下面的代码)。

默认情况下，handleAfterValidate 中的 this 引用 HotTable 实例。如果我将处理程序绑定(bind)到 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>
    );
}

Answer 1

您可以使用柯里化(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，只需在谷歌上搜索如何实现柯里化(Currying)助手。