eslint 抱怨未使用的 React var答案

【问题标题】：eslint complaining about unused React vareslint 抱怨未使用的 React var
【发布时间】：2023-03-18 16:06:01
【问题描述】：

我有一个如下所示的文件：

import React from 'react';
import PropTypes from 'prop-types';

const I18NLanguage = (props) => {
    const {code, i18n} = props;

    const languageMap = {
        'en': i18n.english,
        'es': i18n.spanish,
        'fr': i18n.french,
        'de': i18n.german,
        'pt': i18n.portuguese,
        'zh-Hans': i18n.simplifiedChinese,
        'zh-Hant': i18n.traditionalChinese,
        'ja': i18n.japanese
    }
    return (
        <>
            {languageMap[code]}
        </>
    )
};

I18NLanguage.propTypes = {
    code: PropTypes.string.isRequired,
    i18n: PropTypes.object.isRequired
};

export default I18NLanguage;

// const Input = ({ label, text, type, id, value, handleChange }) => (
//     <div className='form-group'>
//       <label htmlFor={label}>{text}</label>
//       <input
//         type={type}
//         className='form-control'
//         id={id}
//         value={value}
//         onChange={handleChange}
//         required
//       />
//     </div>
//   );

// Input.propTypes = {
//     label: PropTypes.string.isRequired,
//     text: PropTypes.object.isRequired,
//     type: PropTypes.string.isRequired,
//     id: PropTypes.element.isRequired,
//     value: PropTypes.element.isRequired,
//     handleChange: PropTypes.element.isRequired
// };

// export default Input;

当我运行 eslint 时，它会报错：

1:8 错误 'React' 已定义但从未使用 no-unused-vars

如果我删除导入以做出反应，它会抱怨缺少导入。如果我注释掉代码示例中除了两个导入之外的所有内容，并取消注释 Input 函数及其下面的所有内容，那就很高兴了。

对可能出现的问题有什么建议吗？我的 .eslintrc 看起来像这样：

{
    "parser": "babel-eslint",
    "parserOptions": {
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "node": true
    },
    "plugins": [
      "react"
    ],
    "rules": {
      "react/display-name": ["error", { "ignoreTranspilerName": false }],
      "react/no-find-dom-node": [0],
      "no-console": [0]
    },
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    "settings": {
      "react": {
        "version": "16.4"
      }
    },
    "globals": {
    }
  }

感谢您的宝贵时间。

【问题讨论】：

标签： reactjs eslint

【解决方案1】：

这是因为 eslint 不将 <>（片段）识别为 JSX，而 babel 可以。

不确定更新 eslint 是否能解决问题，但你可以试试。否则，只需使用 <Fragment> 或禁用该行被 linted：import React from 'react'; /* eslint-disable-line no-unused-vars */

【讨论】：

【解决方案2】：

由于引入了新的 jsx 转换，你不需要在你的情况下导入 react。

请注意我们的原始代码如何不再需要导入 React 来使用 JSX！（但我们仍然需要导入 React 才能使用 Hook 或 React 提供的其他导出。）

来源：https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

希望对你有帮助，祝你有美好的一天

【讨论】：