eslint 抱怨未使用的 React var

Posted 2023-02-21

技术标签:

【中文标题】eslint 抱怨未使用的 React var【英文标题】：eslint complaining about unused React var 【发布时间】：2019-05-06 05:19:57 【问题描述】：

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

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":

感谢您的宝贵时间。

【问题讨论】：

【参考方案1】：

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

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

【讨论】：

【参考方案2】：

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