Prettier / ESLint / React

Question

对于一个初学者来说，关于TS/React导入的规则有些矛盾。在使用Eslint/Prettier时，会出现'React' is declared but its value is never read.错误。但是如果我将其移除，就会出现'React' must be in scope when using JSX错误。我无法理解其中原因！

ReactDOM.render(<Hello greeting="Site under construction..." />, document.getElementById('root'));

import React from 'react';

export interface IProps {
    greeting: string;
}

function Hello({ greeting }: IProps) {
    return <div>{greeting}</div>;
}

export default Hello;

/Users/Jeremyrrsmith/Coding/GitHub/portfolio-site/src/components/Hello.tsx TypeScript错误：/Users/Jeremyrrsmith/Coding/GitHub/portfolio-site/src/components/Hello.tsx（未定义，未定义）：
'React'被声明了，但它的值从未被读取。TS6133

但如果我从上面的Hello.tsx导入移除：

src/components/Hello.tsx
第6行，第12个字符：使用JSX时必须在作用域中引入'React' react/react-in-jsx-scope

搜索关键字可了解每个错误的详细信息。

- Jeremy

---

尝试使用 import * as React from 'react';。 - b3hr4d

请确保您正在使用React 17+版本。 - Or Assayag

这对我解决了问题，感谢大家！ - Jeremy

Answer 1

最新版本的React不需要导入。使用那个版本或修复你的ESLint，这是问题所在。

- Jose Greinch