我是一个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而不是react。

其他回答

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

Add

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

在文件的顶部。

导入行应该是:

import React, { Component }  from 'react';

注意大写的R代表React。

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

将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'

如果没有工作,添加这一行从“react-dom/client”导入ReactDOM;而不是从'react-dom'导入ReactDOM

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

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

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