如果我使用 JSX 语法，是不是需要“导入 React”？

Posted 2023-03-27

【中文标题】如果我使用 JSX 语法，是不是需要“导入 React”？

【英文标题】：Do I need to "import React" if I use JSX syntax?如果我使用 JSX 语法，是否需要“导入 React”？

【发布时间】：2021-06-09 14:16:18

【问题描述】：

我通过 Create React App 创建了一个 React 应用程序。在App.js 文件中，没有import React from 'react';，尽管我运行它时它可以正常工作。然后我这样设置 ESLint：

    "extends": ["airbnb", "prettier", "react-app"],
    "rules": 
        "prettier/prettier": "error"
    ,
    "plugins": ["prettier"]

之后应用程序不会运行并出现错误：

React' must be in scope when using JSX        react/react-in-jsx-scope

解决这个问题的更正确方法是什么 - 向 ESLint 规则添加例外或在我使用 JSX 的任何地方显式导入 React？

【问题讨论】：

React 17 提供 a different way 来转换 JSX，这意味着 React 不必在范围内。如果你正在使用它，你可以禁用该规则。

谢谢@jonrsharpe 请添加您的评论作为答案，以便我接受

【参考方案1】：

从 React 17* 开始，new JSX transform 不再需要显式的 import React from "react";。如果您使用此转换，则不再需要启用 ESLint 规则；这在帖子中明确指出：

ESLint

如果您正在使用 eslint-plugin-react, react/jsx-uses-react 和 react/react-in-jsx-scope 规则没有 需要更长的时间，可以关闭或删除。

  // ...
  "rules": 
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  

* 和 v16.14.0、v15.7.0、v0.14.10