React 容器范围不被组件继承答案

【问题标题】：React container scope is not inherited by componentReact 容器范围不被组件继承
【发布时间】：2018-08-01 10:46:14
【问题描述】：

我已经分离了容器和组件，现在面临重新渲染组件的问题。

render() {
    return <DomainEdit schema={this.props.schema} domain={this.domain} formData={this.props.formData} updateSubType={this.updateSubType} types={this.props.types}/>;
}

我正在发送updateSubType 方法，这是一个回调方法，只要表单中的任何内容发生更改。

更改后，我将发回更改的内容，并且必须更新 this.props.schema 才能使用新架构重新渲染组件。

我面临的问题是回调方法this是组件的范围而不是容器本身，换句话说组件只有我在渲染方法中发送的参数，这是一个问题，因为我无法访问容器道具并重新渲染组件。

如何在容器中定义的回调方法中重新渲染组件？

【问题讨论】：

标签： javascript reactjs scope components containers

【解决方案1】：

看起来像是上下文绑定问题。

如果您希望在 DomainEdit 中调用 updateSubType 并且在此回调中仍然有 this 指向容器引用，则必须将 updateSubType 绑定到容器实例。

有两种方法可以做到这一点：在容器的构造函数中，重新定义this.updateSubType = this.updateSubType.bind(this);

或者如果您使用的是 ES6，请以这种方式定义 updateSubType：

updateSubType = () => {
    ...method definition
}

箭头函数表示法 (() => {}) 自动将函数绑定到周围的实例。

【讨论】：