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

其他回答

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

在文件的顶部。

如图所示,通过在package.json中添加插件g——fix来删除lint错误并添加自动修复

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

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

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

希望这对你有帮助。