如何让工具方法以调用方上下文执行，无需传入this？

你遇到的问题核心是箭头函数的this绑定特性——箭头函数会捕获定义时的上下文，而非调用时的，所以直接用箭头函数没办法拿到调用组件的this。下面给你几个不用手动传this的可行方案，按推荐程度排序：

1. 普通函数 + 调用时绑定（最直接的轻量方案） #

把你的方法改成普通函数（不要用箭头函数），这样它的this会由调用方式决定：

// 库文件中定义
export function showSnackbarNotification(msg, variant) {
  this.setState({
    notificationMsg: msg,
    notificationToggle: true,
    variant: variant
  });
}

然后在组件里有两种调用方式：

• 方式一：调用时用call指定上下文

// 组件内调用
showSnackbarNotification.call(this, "checking the function", "error");

• 方式二：在组件构造函数（或类字段）中提前绑定，之后直接调用

class YourComponent extends React.Component {
  // 类字段语法，自动绑定this
  showSnackbar = showSnackbarNotification.bind(this);

  handleClick = () => {
    this.showSnackbar("checking the function", "error");
  };

  // ...其他代码
}

这个方案完全不需要额外依赖，只是调整了函数类型和调用方式，符合你"低依赖"的需求。

2. 高阶组件（HOC）—— 更优雅的封装 #

如果希望组件调用时完全不用关心绑定逻辑，可以用高阶组件把这个方法注入到组件实例中：

// 库文件中定义HOC
export function withSnackbar(Component) {
  return class extends React.Component {
    showSnackbarNotification = (msg, variant) => {
      this.setState({
        notificationMsg: msg,
        notificationToggle: true,
        variant: variant
      });
    };

    render() {
      return <Component {...this.props} showSnackbar={this.showSnackbarNotification} />;
    }
  };
}

然后组件使用时只需要包裹一下：

// 你的业务组件
class YourComponent extends React.Component {
  handleClick = () => {
    this.props.showSnackbar("checking the function", "error");
  };

  render() {
    // ...渲染内容
  }
}

// 用HOC包裹
export default withSnackbar(YourComponent);

这个方案把状态管理的逻辑封装在HOC里，业务组件只需要调用props里的方法，完全不用处理this，而且可以复用给多个组件。

3. 自定义Hook（函数组件专属） #

如果你的项目用的是函数组件，自定义Hook是最推荐的方案，完全贴合React Hooks的设计：

// 库文件中定义Hook
import { useState } from 'react';

export function useSnackbar() {
  const [notificationState, setNotificationState] = useState({
    notificationMsg: "",
    notificationToggle: false,
    variant: ""
  });

  const showSnackbarNotification = (msg, variant) => {
    setNotificationState({
      notificationMsg: msg,
      notificationToggle: true,
      variant: variant
    });
  };

  // 返回方法和状态，组件可以按需使用
  return { showSnackbarNotification, ...notificationState };
}

然后在函数组件中使用：

import { useSnackbar } from './your-snackbar-lib';

function YourComponent() {
  const { showSnackbarNotification } = useSnackbar();

  const handleClick = () => {
    showSnackbarNotification("checking the function", "error");
  };

  return (
    // ...渲染内容，比如根据notificationState显示Snackbar
    <button onClick={handleClick}>Show Snackbar</button>
  );
}

这个方案完全摆脱了this的困扰，是函数组件下最简洁的实现，而且符合React的现代开发模式。

为什么箭头函数不行？ #

再补充一下你最初的疑问：箭头函数没有自己的this，它的this是继承自定义时所在的词法作用域（也就是你的库文件的上下文，不是调用组件的上下文），所以无论怎么调用箭头函数，它的this都不会指向组件实例，自然无法调用this.setState。所以必须用普通函数或者上述的Hook/HOC方案来解决。

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