我是一个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"
   ...
}

其他回答

导入行应该是:

import React, { Component }  from 'react';

注意大写的R代表React。

在使用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;

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

Add

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

在文件的顶部。

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

下面这行为我解决了这个问题。

/** @jsx jsx */
import {css, jsx} from "@emotion/react";

希望这对你有帮助。