esint抱怨未使用的React var

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;

当我运行esint时，它会发出以下错误消息：

1:8错误"React"已定义，但从未使用过无未使用的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识别为。

不确定更新esint是否能修复它，但你可以尝试一下。否则，只需使用<Fragment>或禁用线路：import React from 'react'; /* eslint-disable-line no-unused-vars */

Answer 2

由于引入了新的jsx转换，您不需要在您的案例中导入react。

请注意，我们的原始代码不再需要导入React来使用JSX！(但我们仍然需要进口React才能使用React提供的Hooks或其他出口产品。(

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

希望它有帮助，有一个伟大的一天