React项目使用eslint-plugin-react触发jsx-no-literals报错如何解决

该报错是eslint-plugin-react提供的react/jsx-no-literals校验规则触发的。这条规则的设计目的是禁止在JSX中直接编写裸字符串字面量，核心作用包括强制项目统一使用国际化方案、避免硬编码文案散落在业务代码中、统一字符串书写规范。你的代码里直接在<button>标签内写了submit字符串，没有包裹在JSX表达式容器{}中，不符合规则要求，因此触发报错。

• 快速适配规则：将字面量字符串直接包裹在JSX表达式容器{}中

  <button type="submit">{'submit'}</button>
  <!-- 也可以用模板字符串写法 -->
  <button type="submit">{`submit`}</button>
  

• 抽离文案为常量/变量：适合项目要求统一管理所有文案的场景

  // 可统一放在文案常量文件中管理
  const SUBMIT_BUTTON_TEXT = 'submit';
  
  // 组件内使用
  <button type="submit">{SUBMIT_BUTTON_TEXT}</button>
  

• 结合国际化方案使用：如果项目有国际化需求，直接用i18n翻译函数包裹文案即可

  // 以react-i18next为例
  <button type="submit">{t('common.submit')}</button>
  

• 调整ESLint规则配置：如果项目不需要这条校验规则，可以在ESLint配置文件（.eslintrc.js、.eslintrc.json等）中修改规则：
  1. 完全关闭规则

  {
    "rules": {
      "react/jsx-no-literals": "off"
    }
  }
  

  2. 仅忽略原生DOM组件的字符串校验（推荐，既保留对自定义组件的校验，又不影响原生标签的常规写法）

  {
    "rules": {
      "react/jsx-no-literals": ["error", { "ignoreDOMComponents": true }]
    }
  }
  

注意：如果是团队协作项目，修改ESLint全局规则前请先和团队对齐代码规范，避免出现风格不一致的问题。

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