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

其他回答

如果你想为所有使用jsx语法的文件自动包含import React from ' React ',请安装React -require babel插件:

npm install babel-plugin-react-require --save-dev

在.babelrc中添加react-require。这个插件应该在transform-es2015-modules-commonjs插件之前定义,因为它使用ES2015模块语法将React导入作用域。

{
  "plugins": [
    "react-require"
  ]
}

来源:https://www.npmjs.com/package/babel-plugin-react-require

这是由于从'react'导入错误的模块react而导致的错误,您试试这个如何: 1日

import React , { Component}  from 'react';

或者你也可以试试这个:

import React from 'react';
import { render   }  from 'react-dom';

class TechView extends React.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";

希望这对你有帮助。

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

对我来说,我有这个问题,一旦我使用npm审计fix -force,所以它降级反应脚本到版本2,它迫使我安装eslint版本5,问题开始泛滥,为了解决这个问题,我更新了一次反应脚本,事情解决了。 还要确保你的eslint包含这些规则

module.exports = {
  extends: ['react-app', 'react-app/jest', 'airbnb', 'prettier'],
  plugins: ['prettier'],
  rules: {
    ...
    // React scope no longer necessary with new JSX transform
    'react/react-in-jsx-scope': 'off',
    // Allow .js files to use JSX syntax
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    ...
  },
}