如何解决TSX文件中react/jsx-no-bind箭头函数警告？

你遇到的JSX props should not use arrow functions警告来自ESLint的react/jsx-no-bind规则，不是TSLint的jsx-no-lambda，所以修改tslint.json不会生效。以下是具体解决步骤：

核心原因 #

目前TypeScript项目普遍使用ESLint（搭配@typescript-eslint插件）替代已废弃的TSLint，你的警告属于ESLint规则范畴，得改ESLint配置才行。

解决方案 #

1. 直接修改ESLint配置关闭或调整规则 #

找到项目中的ESLint配置文件（通常是.eslintrc.js、.eslintrc.json或package.json里的eslintConfig字段），在rules中添加或修改：

{
  "rules": {
    // 直接关闭警告
    "react/jsx-no-bind": "off",
    // 或者允许箭头函数，只禁止bind/call/apply
    "react/jsx-no-bind": ["error", { "allowArrowFunctions": true }]
  }
}

2. 若项目仍在用TSLint，建议迁移到ESLint #

TSLint已停止维护，迁移到ESLint是长期方案：

• 安装必要依赖：

  npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react --save-dev
  

• 创建.eslintrc.js配置文件，示例如下：

  module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint', 'react'],
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:react/recommended'
    ],
    rules: {
      "react/jsx-no-bind": "off" // 根据需求调整
    },
    settings: {
      react: {
        version: 'detect'
      }
    }
  };
  

• 删除项目中的tslint.json和TSLint相关依赖。

3. 不关闭规则的优化写法 #

如果不想关闭规则，可通过提前绑定函数避免在JSX props中使用箭头函数：

• 类组件：用class fields定义箭头函数

  class MyComponent extends React.Component {
    handleButtonClick = () => {
      // 你的点击逻辑
    };
  
    render() {
      return <button onClick={this.handleButtonClick}>点击按钮</button>;
    }
  }
  

• 函数组件：用useCallback缓存函数

  import { useCallback } from 'react';
  
  const MyComponent = () => {
    const handleButtonClick = useCallback(() => {
      // 你的点击逻辑
    }, []); // 按需添加依赖项
  
    return <button onClick={handleButtonClick}>点击按钮</button>;
  };
  

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