React异步调用父类组件方法时如何正确绑定this上下文

这个报错和Electron环境、异步调用逻辑无关，核心是React类组件的原型方法默认不会自动绑定类实例的this上下文。当你把this.openFile直接作为prop传递给子组件时，方法脱离了Parent类实例的作用域，在React开启的严格模式下，脱离实例调用的类方法内部this会指向undefined，因此访问this.showMessage时会抛出找不到属性的错误。

以下三种方案都可以解决问题，优先推荐前两种性能更好的写法：

• 方案1：构造函数内显式绑定this
  这是React官方推荐的标准绑定方式，只需要在类构造函数中执行一次bind，后续方法调用的this永远指向类实例，不会有额外性能开销。

  class Parent extends React.Component {
    constructor(props) {
      super(props);
      this.openFile = this.openFile.bind(this);
    }
  
    openFile(path) {
      if (someCondition) this.showMessage();
    }
  
    render() {
      // 注意原代码render漏了return，会导致组件无法正常渲染
      return <Child openFile={this.openFile} />;
    }
  }
  

• 方案2：类字段箭头函数定义方法
  利用箭头函数没有自身this、会继承定义时作用域this的特性，直接把方法定义为类字段的箭头函数，不需要手动写bind，是目前业务开发中最常用的写法。

  class Parent extends React.Component {
    openFile = (path) => {
      if (someCondition) this.showMessage();
    }
  
    render() {
      return <Child openFile={this.openFile} />;
    }
  }
  

• 方案3：传参时用箭头函数包裹（不推荐优先使用）
  在给子组件传递props时，用箭头函数包裹一层调用，这样方法执行时的this会自动绑定到当前类实例。但这种写法每次父组件重渲染都会生成新的函数引用，如果子组件做了React.memo之类的性能优化，会触发子组件不必要的重渲染。

  class Parent extends React.Component {
    openFile(path) {
      if (someCondition) this.showMessage();
    }
  
    render() {
      return <Child openFile={(path) => this.openFile(path)} />;
    }
  }
  

你当前子组件里的dialog.showOpenDialog异步回调逻辑本身写法正确，只要父组件传递的openFile方法绑定了正确的实例上下文，不管是同步还是异步触发，方法内部的this都能正确指向Parent实例，不需要在子组件侧做额外的上下文处理。

内容的提问来源于stack exchange，提问作者Samson Liu