React父组件中如何绑定函数？附相关组件代码示例

嘿，我看了你的代码，问题出在getTheValue函数的this指向不对——当子组件调用this.props.data.valueB(1000)时，this已经不是父组件Parent的实例了，所以没法访问this.props.intl，会导致报错。下面给你几种靠谱的解决办法：

方法1：在构造函数中绑定this #

这是React类组件里最经典的绑定方式，在父组件的构造函数里把getTheValue的this绑定到组件实例：

import * as React from 'react';
export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    // 绑定this到组件实例
    this.getTheValue = this.getTheValue.bind(this);
  }

  loadData() {
    return {
      valueA: this.props.intl.formatMessage({id: 'app.placeHolder'}),
      valueB: this.getTheValue // 直接引用绑定后的函数
    };
  }

  getTheValue(value) {
    return this.props.intl.formatMessage({id: 'app.placeHolder'}, {price: value});
  }

  render() {
    return <Child data={this.loadData()} />;
  }
}

class Child extends React.Component {
  render() {
    return <div>{this.props.data.valueB(1000)}</div>;
  }
}

方法2：用箭头函数定义类方法 #

箭头函数会自动捕获当前上下文的this，所以直接把getTheValue定义成箭头函数，就不用手动绑定了：

import * as React from 'react';
export default class Parent extends React.Component {
  loadData() {
    return {
      valueA: this.props.intl.formatMessage({id: 'app.placeHolder'}),
      valueB: this.getTheValue
    };
  }

  // 用箭头函数定义，this自动指向父组件实例
  getTheValue = (value) => {
    return this.props.intl.formatMessage({id: 'app.placeHolder'}, {price: value});
  }

  render() {
    return <Child data={this.loadData()} />;
  }
}

class Child extends React.Component {
  render() {
    return <div>{this.props.data.valueB(1000)}</div>;
  }
}

方法3：在loadData中返回时绑定this #

如果不想修改函数定义或者构造函数，也可以在loadData里返回valueB的时候，直接绑定this或者用箭头函数包裹：

import * as React from 'react';
export default class Parent extends React.Component {
  loadData() {
    return {
      valueA: this.props.intl.formatMessage({id: 'app.placeHolder'}),
      // 方式A：bind绑定this
      valueB: this.getTheValue.bind(this),
      // 方式B：用箭头函数包裹，调用时this指向父组件
      // valueB: (value) => this.getTheValue(value)
    };
  }

  getTheValue(value) {
    return this.props.intl.formatMessage({id: 'app.placeHolder'}, {price: value});
  }

  render() {
    return <Child data={this.loadData()} />;
  }
}

class Child extends React.Component {
  render() {
    return <div>{this.props.data.valueB(1000)}</div>;
  }
}

这几种方法都能解决你的问题，其中方法2（箭头函数类方法）是现在比较推荐的写法，代码更简洁，不用手动处理绑定。

内容的提问来源于stack exchange，提问作者sravan ganji