& # 39;反应# 39;当使用JSX react/react-in- JSX -scope时，必须在scope内?

我是一个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'必须在作用域内
513595 次浏览
小开
最佳答案

导入行应该是:

import React, { Component }  from 'react';

注意大写的R代表React。

小开

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

添加

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

在文件的顶部。

小开 
import React, { Component } from 'react';

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

小开

将以下设置添加到.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
}
< p >为什么? 如果你正在使用NEXT.js，那么你不需要在文件的顶部导入React, nextjs会为你做这件事

参考:https://gourav.io/blog/nextjs-cheatsheet (Next.js备考表)

小开
这是由于从'react'导入错误的模块而导致的错误，你试试这个怎么样: 1日< / >强

import React , { Component}  from 'react';

2日或者你也可以试试这个:

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错误并添加自动修复

enter image description here

小开

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

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

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

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

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

小开

如果你使用React v17，你可以在eslint配置文件中禁用该规则:

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

在eslint配置文件中添加"plugin:react/jsx-runtime"到extends，参考react-in-jsx-scope

小开

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

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

在你的情况下，这可能是不同的。 如果你使用的是基于类的组件，你可能需要包含组件 

import React, { Component }  from 'react';

或者，如果你正在使用eslint，你可以从上面的注释中得到一些解决方案。

< a href = " https://dev。To /chandelieraxel/why-do- reaction -need- To -be-in-scope-for jsx-3hen" rel="noreferrer">know more

小开

在使用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 17+(在2022年，我假设你是)，你需要在你的.eslintrc中添加以下一行:

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

然后只在顶层文件中导入一次React，比如App.jsx——不需要在其他任何地方导入它，除非你需要useEffect等api。

小开
每当我们使用JSX在React中创建一个自定义组件时，它都会在Babel的帮助下转换为向后兼容的JS代码。
因为JSX编译成反应。React库也必须始终在作用域中

例子:

这个自定义组件:

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

转化为:

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

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

React Docs Reference

修复:导入React

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

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

< p > 注意:
从React 17+开始，我们就不用做这样的导入了，但是为了安全起见，最好还是添加imports，因为ESLint会产生错误!< / p >

你可以在ESLint配置文件(.eslintrc.json)中禁用该规则来忽略这些错误:

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

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

我使用的是react-scripts 0.9.5版本，并将其升级到5.0.1。

小开
我注意到的一件事是import React from " 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";

希望这对你有帮助。

小开

我也有类似的问题。

在我添加主组件后得到了修复:App.js 如果你有其他组件，请确保在这些文件中也导入react 

import React from "react";
小开

对我来说，我得到了这个问题，一旦我使用npm audit fix --force，所以它降级react-scripts到版本2，它迫使我安装eslint版本5，问题开始泛滥，为了解决这个问题，我再次更新了react-scripts，事情解决了。 还要确保你的eslint包含这些规则

module.exports = {
extends: ['react-app', 'react-app/jest', 'airbnb', 'prettier'],
plugins: ['prettier'],
rules: {
...
// React scope no longer necessary with new JSX transform
'react/react-in-jsx-scope': 'off',
// Allow .js files to use JSX syntax
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
...
},
}

提交答案