使用 JSX react/react-in-jsx-scope 时，'React' 必须在范围内？

导入行应为：

import React, { Component }  from 'react';

注意 React 的大写 R。

---

将以下设置添加到 .eslintrc.js / .eslintrc.json 以忽略这些错误：

  rules: {
    // suppress errors for missing 'import React' in files
   "react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
  }

为什么？ 如果您使用 NEXT.js，则不需要在文件顶部导入 React，nextjs 会为您完成。

参考：https://gourav.io/blog/nextjs-cheatsheet（Next.js 备忘单）

---

如果你使用 React v17，你可以在你的 eslint 配置文件中安全地禁用该规则：

"rules": {
   ...
    "react/react-in-jsx-scope": "off"
   ...
}

---

对于那些仍然没有得到接受的解决方案的人：

添加

import React from 'react'
import ReactDOM from 'react-dom'

在文件的顶部。

---

import React, { Component } from 'react';

这是拼写错误，您需要输入 React 而不是 react。

---

如果您想为所有使用 jsx 语法的文件自动包含 import React from 'react'，请安装 react-require babel 插件：

npm install babel-plugin-react-require --save-dev

将 react-require 添加到 .babelrc 中。这个插件应该在 transform-es2015-modules-commonjs 插件之前定义，因为它使用 ES2015 模块语法将 React 导入范围。

{
  "plugins": [
    "react-require"
  ]
}

来源：https://www.npmjs.com/package/babel-plugin-react-require

---

错误非常直接，您导入了 react 而不是 React。

---

将 "plugin:react/jsx-runtime" 添加到您的 eslint 配置文件中的扩展，请参阅 react-in-jsx-scope

---

就我而言，我必须在 src 文件夹中的 index.js 文件中包含这两行。

import React from 'react'
import ReactDOM from 'react-dom'

在您的情况下，这可能会有所不同。如果您使用基于类的组件，则可能需要包含组件。

import React, { Component }  from 'react';

或者，如果您使用 eslint，您可以从上述评论中获得一些解决方案。

know more

---

如果您正在运行 React 17+（我假设您是 2022 年）- 您需要将以下行添加到您的 .eslintrc 中：

{
  "extends": ["plugin:react/jsx-runtime"]
}

然后只在您的顶级文件中导入 React 一次，如 App.jsx - 无需在其他任何地方导入它，除非您需要像 useEffect 等的 api。

---

使用react框架时，首先需要从react中导入react，导入后始终保持react首字母大写。

import React, {Component} from 'react'`

import React, { Component} from 'react';
import { render }  from 'react-dom';

class TechView extends Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath'
       } 
    }
    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}
export default TechView;

---

这是由导入错误模块引起的错误 react from 'react' 你试试这个：1st

import React , { Component}  from 'react';

第二或者你也可以试试这个：

import React from 'react';
import { render   }  from 'react-dom';

class TechView extends React.Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath',
       }
    }
    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}

export default TechView;

---

如图所示，通过在 package.json 中添加 g--fix 来删除该 lint 错误并添加自动修复

https://i.stack.imgur.com/F7Is0.png

---

我遇到了类似的错误，为我解决的问题是在每个组件中导入 React，尽管我使用的是 React18

import React from 'react';

---

每当我们使用 JSX 在 React 中制作自定义组件时，它都会在 Babel 的帮助下转换为向后兼容的 JS 代码。
由于 JSX 编译为 React.createElement，{2库也必须始终在范围内。

例子：

这个自定义组件：

<MyButton color="blue" shadowSize={2}> Click Me </MyButton>

转化为：

React.createElement(MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')
^^^^^

由于转换后的代码需要 React 库，因此我们需要将其导入作用域。

React Docs Reference

修复：导入反应

import React from 'react';
// or
import * as React from 'react';

选择一个，这取决于用户！

注意：
从 React 17+ 开始，我们不再进行此类导入，但为了安全起见，最好添加 imports，因为 ESLint 可能会生成错误！

可以禁用 ESLint 配置文件 (.eslintrc.json) 中的规则以忽略这些错误：

"rules": {
    "react/react-in-jsx-scope": "off"
}

---

将 react-scripts 版本升级到最新版本解决了我的问题。

我正在使用 react-scripts 版本 0.9.5 并将其升级到 5.0.1 完成了这项工作。

---

我注意到的一件事是从“react”导入 React；应该在那里而不是 import react , { Component} from 'react'; 我所做的其他事情是，

(1) 在 index.js 文件中添加以下行。

import React from 'react'
import ReactDOM from 'react-dom'

如果不起作用为 ReactDOM import ReactDOM from "react-dom/client"; 添加此行而不是 import ReactDOM from 'react-dom'

(2) 更改 eslint 配置文件的以下属性。

  rules: {
   "react/react-in-jsx-scope": "off",
  }

但是从 React 17 开始，也不需要添加 import React from 'react' 和 next js

---

下面的行为我解决了这个问题。

/** @jsx jsx */
import {css, jsx} from "@emotion/react";

希望这对你有帮助。

---