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


当前回答

我也有类似的问题。

在我在主组件中添加下面的代码后得到了修复:App.js 如果您有其他组件,请确保在这些文件中也导入react。

import React from "react";

其他回答

这个错误非常直接,你导入了react而不是react。

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

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

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

Add

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

在文件的顶部。

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

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

如果你正在运行React 17+(在2022年,我假设你是),你需要在你的.eslintrc中添加以下一行:

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

然后只在你的顶级文件中导入一次React,比如App.jsx——不需要在其他任何地方导入它,除非你需要一个像useEffect之类的api。