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

【问题标题】：'React' must be in scope when using JSX react/react-in-jsx-scope?使用 JSX react/react-in-jsx-scope 时，'React' 必须在范围内？
【发布时间】：2017-07-27 05:00:51
【问题描述】：

我是一名 Angular 开发人员，刚接触 React，这是一个简单的 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;

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

【问题讨论】：

标签： reactjs

【解决方案1】：

导入行应该是：

import React, { Component }  from 'react';

注意 React 的大写 R。

【讨论】：

如何避免。我的意思是当我创建一个无状态函数时，在 Nextjs 中它不需要它
@MuhaiminCS 更改 eslintrc 文件中的规则

【解决方案2】：

将以下设置添加到.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

【讨论】：

NextJs 用户在这里，谢谢。鉴于添加规则"react/react-in-jsx-scope": "off" 将消除错误，添加globals 完成了什么？谢谢！
请注意，如果没有导入 React，那么测试您的组件将是“困难的”。在这种情况下，如果您的组件不需要，您的测试文件将需要导入它。
@GorvGoyl 即使这样做了，构建也会失败并出现同样的错误。知道如何抑制它吗？

【解决方案3】：

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

添加

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

在文件的顶部。

【讨论】：

【解决方案4】：

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

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

【讨论】：

非常感谢，小提示，我认为遵循 0（关闭）、1（警告）和 2（错误）约定优于使用“关闭”。为了使配置更加连贯。
选择 0 或“关闭”是一个见仁见智的问题。
啊，老实说，我并没有意识到所有数字都映射到等效的字符串...我的错误。所以你实际上可以做“关闭、警告、错误”或“0、1、2”。

【解决方案5】：

import React, { Component } from 'react';

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

【讨论】：

这个确切的答案已经作为接受的答案提供。

【解决方案6】：

如果您想为所有使用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

【讨论】：

【解决方案7】：

错误非常简单，您导入了 react 而不是 React。

【讨论】：

【解决方案8】：

这是由于从“react”导入错误的模块导致的错误，你试试这个：第一

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;

【讨论】：

【解决方案9】：

按照图片删除该 lint 错误并通过在 package.json 中添加 g--fix 添加自动修复

【讨论】：

【解决方案10】：

在你的 eslint 配置文件中添加 "plugin:react/jsx-runtime" 扩展，参考 react-in-jsx-scope

【讨论】：

【解决方案11】：

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

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

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

import React, { Component }  from 'react';

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

know more

【讨论】：