TypeScript环境下React子组件调用父组件方法时this为undefined

这个问题在React类组件开发里太常见了！核心原因是：类的方法默认不会绑定组件实例，当你把它作为props传给子组件时，方法的this上下文就丢失了，在严格模式下就会变成undefined。下面给你三种实用的解决方案，结合你的User组件来举例：

1. 在构造函数中手动绑定this #

这是React早期最常用的方式，通过bind方法把方法的this强制绑定到当前组件实例上：

import * as React from 'react';
import Table from './../components/Table';
import Delete from './../components/Delete';

class User extends React.Component<any, any> {
  constructor(props) {
    super(props);
    // 关键：绑定showModalDelete的this到User组件实例
    this.showModalDelete = this.showModalDelete.bind(this);
  }

  static urlUsers : string = 'http://localhost:52968/employee/api/index';
  static urlDelete : string = 'http://localhost:52968/employee/api/delete/';
  static tableHeader = ['Id','First name', 'Surname','Email','Phone number',...];

  showModalDelete() {
    // 现在this会正确指向User组件实例
    console.log(this);
    // 你的删除弹窗逻辑代码
  }

  render() {
    return (
      <div>
        {/* 直接传递绑定后的方法 */}
        <Table deleteHandler={this.showModalDelete} />
        <Delete onDelete={this.showModalDelete} />
      </div>
    );
  }
}

优点：只绑定一次，不会在每次渲染时创建新函数，性能友好。

2. 使用箭头函数定义类方法（Class Fields语法） #

ES6+的class fields语法允许我们用箭头函数直接定义类方法，箭头函数会自动捕获当前组件的this上下文，省去手动绑定的步骤：

import * as React from 'react';
import Table from './../components/Table';
import Delete from './../components/Delete';

class User extends React.Component<any, any> {
  static urlUsers : string = 'http://localhost:52968/employee/api/index';
  static urlDelete : string = 'http://localhost:52968/employee/api/delete/';
  static tableHeader = ['Id','First name', 'Surname','Email','Phone number',...];

  // 用箭头函数定义方法，自动绑定this
  showModalDelete = () => {
    // this正确指向User组件实例
    console.log(this);
    // 你的删除弹窗逻辑代码
  }

  render() {
    return (
      <div>
        <Table deleteHandler={this.showModalDelete} />
        <Delete onDelete={this.showModalDelete} />
      </div>
    );
  }
}

优点：写法简洁直观，不需要额外的构造函数绑定，现在是React类组件的主流写法之一。

3. 在传递props时用箭头函数包裹 #

这种方式是在render里用箭头函数包裹父组件方法，调用时确保this指向正确。不过要注意，每次组件渲染都会创建新的箭头函数实例，可能导致子组件不必要的重渲染（如果子组件是React.PureComponent或使用了memo优化）：

import * as React from 'react';
import Table from './../components/Table';
import Delete from './../components/Delete';

class User extends React.Component<any, any> {
  static urlUsers : string = 'http://localhost:52968/employee/api/index';
  static urlDelete : string = 'http://localhost:52968/employee/api/delete/';
  static tableHeader = ['Id','First name', 'Surname','Email','Phone number',...];

  showModalDelete() {
    // this正确指向User组件实例
    console.log(this);
    // 你的删除弹窗逻辑代码
  }

  render() {
    return (
      <div>
        {/* 用箭头函数包裹，确保this指向正确 */}
        <Table deleteHandler={() => this.showModalDelete()} />
        <Delete onDelete={() => this.showModalDelete()} />
      </div>
    );
  }
}

适用场景：适合简单场景，或者子组件没有做性能优化的情况。

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