我是一个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'必须在作用域中


当前回答

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

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

其他回答

对我来说,我有这个问题,一旦我使用npm审计fix -force,所以它降级反应脚本到版本2,它迫使我安装eslint版本5,问题开始泛滥,为了解决这个问题,我更新了一次反应脚本,事情解决了。 还要确保你的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'] }],
    ...
  },
}

这是由于从'react'导入错误的模块react而导致的错误,您试试这个如何: 1日

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;

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

例子:

这个自定义组件:

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

转化为:

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

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

React Docs参考

修复:导入React

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

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

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

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

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

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

Add

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

在文件的顶部。

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

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

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

import React, { Component }  from 'react';

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

知道更多