React类组件向函数子组件传回调时this未定义的解决方法

嘿，这个问题我之前踩过坑！主要是两个地方出错了：this的指向丢失，还有子组件接收props的方式不对。咱们一步步来修复：

1. 修复父组件中this的指向问题 #

在类组件里，普通的方法默认不会自动把this绑定到组件实例上。当你把editConfigCompleted作为props传给子组件后，调用它的时候this会变成undefined（严格模式下），自然就找不到setState了。有三种常用的解决办法：

方法一：构造函数内绑定this #

这是最传统的方式，在组件构造函数里手动把方法的this绑定到当前实例：

import React, { Component } from 'react';
class NotificationsLayout extends React.Component {
  constructor(props) {
    super(props);
    // 关键：绑定this到组件实例
    this.editConfigCompleted = this.editConfigCompleted.bind(this);
  }

  editConfigCompleted() {
    this.setState({
      templateDataChangedForTasksComponent: true,
      templateDataChangedForTemplatesComponent: true
    })
    this.closeEditConfigModal();
  }

  render() {
    return (
      <div className="animated fadeIn">
        <RecipientConfigEditor completionAction={this.editConfigCompleted} />
      </div>
    )
  }
}
export default NotificationsLayout;

方法二：用箭头函数定义类方法（推荐） #

箭头函数会自动捕获当前上下文的this，直接用它定义方法就能省去手动绑定的步骤：

import React, { Component } from 'react';
class NotificationsLayout extends React.Component {
  // 箭头函数自动绑定this到组件实例
  editConfigCompleted = () => {
    this.setState({
      templateDataChangedForTasksComponent: true,
      templateDataChangedForTemplatesComponent: true
    })
    this.closeEditConfigModal();
  }

  render() {
    return (
      <div className="animated fadeIn">
        <RecipientConfigEditor completionAction={this.editConfigCompleted} />
      </div>
    )
  }
}
export default NotificationsLayout;

方法三：传递props时用箭头函数包裹 #

在render里传递回调时，用箭头函数包裹原方法，这样调用时this会指向组件实例：

import React, { Component } from 'react';
class NotificationsLayout extends React.Component {
  editConfigCompleted() {
    this.setState({
      templateDataChangedForTasksComponent: true,
      templateDataChangedForTemplatesComponent: true
    })
    this.closeEditConfigModal();
  }

  render() {
    return (
      <div className="animated fadeIn">
        {/* 用箭头函数包裹，确保this指向正确 */}
        <RecipientConfigEditor completionAction={() => this.editConfigCompleted()} />
      </div>
    )
  }
}
export default NotificationsLayout;

2. 修复子组件接收props的问题 #

你的子组件现在直接把completionAction作为参数，但函数组件的props是一个对象，不是单个参数。你需要从props对象里取出completionAction：

修正后的子组件代码 #

import React from 'react';

// 方式一：直接解构props（更简洁）
export default function RecipientConfigEditor({ completionAction }) {
  function handleButtonClick() {
    completionAction();
  }
  return (
    <button onClick={handleButtonClick}>完成配置</button>
  )
}

// 或者方式二：从props对象中取值
// export default function RecipientConfigEditor(props) {
//   function handleButtonClick() {
//     props.completionAction();
//   }
//   return (
//     <button onClick={handleButtonClick}>完成配置</button>
//   )
// }

把这两个地方都修复后，回调函数调用时就能正确访问到父组件的this.setState了！

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