React+TypeScript中ESLint提示必须解构props，是否必须这么做？

方案一：解构Props（ESLint推荐的规范写法） #

这个规则的核心目的是让代码更简洁易读，避免重复书写props.前缀。针对你的组件场景——既要单独使用title属性，又要把其余props传递给原生button——解构写法非常适配，修改后的代码如下：

import React from 'react';

interface IButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
  title: string;
}

// 解构出title和剩余的props
const PrimaryButton: React.FC<IButtonProps> = ({ title, ...rest }) => {
  return (
    <button type="submit" {...rest}>
      {title}
    </button>
  );
};
export default PrimaryButton;

这种写法既符合ESLint规则，代码逻辑也更清晰，同时保留了原生button所有属性的传递能力。

方案二：禁用该ESLint规则 #

如果你或团队认为这个规则不符合项目风格，也可以选择禁用：

• 局部禁用：在触发提示的代码行上方添加注释，仅对当前组件生效：

  // eslint-disable-next-line react/destructuring-assignment
  const PrimaryButton: React.FC<IButtonProps> = (props: IButtonProps) => {
    // ... 原代码
  };
  

• 全局禁用：在项目的.eslintrc（或.eslintrc.json）文件中修改规则，让整个项目不再检查这个规范：

  {
    "rules": {
      "react/destructuring-assignment": "off"
    }
  }
  

不过建议仅在团队统一风格或特殊场景下才选择禁用，毕竟解构props是React社区普遍认可的简洁写法。

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