我是一个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-scripts升级到最新版本解决了我的问题。
我使用的是react-scripts 0.9.5版本，并将其升级到5.0.1。
其他回答
每当我们使用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"
}
我注意到的一件事是从“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
导入行应该是:
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;
下面这行为我解决了这个问题。
/** @jsx jsx */
import {css, jsx} from "@emotion/react";
希望这对你有帮助。
