Question

我有一个看起来像这样的文件：

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

谢谢您的时间。

Answer 1

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

不确定更新eslint是否可以解决它，但是您可以尝试。否则，只需使用<Fragment>或禁用行即可：import React from 'react'; /* eslint-disable-line no-unused-vars */

Answer 2

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

<块引用>

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

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

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

eslint抱怨未使用的React var

2 个答案: