＆＃39;阵营＆＃39;在使用JSX react / react-in-jsx-scope时必须在范围内？

Question

我是Angular开发人员，也是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;

错误：  ＆＃39;阵营＆＃39;在使用JSX react / react-in-jsx-scope

时必须在范围内

Answer 1

导入行应为：

import React, { Component } from 'react';

注意大写的R。

Answer 2

将以下设置添加到.eslintrc.js / .eslintrc.json中以忽略这些错误：

  rules: {
    // suppress errors for missing 'import React' in files
   "react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
  }

为什么？ 如果您使用的是 NEXT.js ，则不需要在文件顶部导入React，nextjs会为您完成。

Answer 3

对于仍无法获得公认解决方案的人：

添加

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

位于文件顶部。

Answer 4

如果您使用的是 React v17，则可以安全地禁用 eslint 配置文件中的规则：

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

Answer 5

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

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

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

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

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

Answer 6

这是由于导入了错误的模块而引起的错误，此错误来自“反应”，您如何尝试此操作： 第一

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;

Answer 7

按照图片删除该 lint 错误并通过在 package.json 中添加 g--fix 添加自动修复

Answer 8

从'react'导入React，{组件};

这些错误属于拼写错误和大写或小写字母。

Answer 9

错误非常直接，您导入的是反应而不是反应。

TechView.jsx

import React , { Component} from 'react';

class TechView extends Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath'
       }
    }

    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}

export default TechView;

此外，除非是根目录 index.js ，否则您无需在上述代码中导入渲染。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TechView from './TechView';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <TechView />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

注意：您可以按照原始帖子中的方式导入渲染并直接使用它：

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import TechView from './TechView';
import * as serviceWorker from './serviceWorker';

render(
  <React.StrictMode>
    <TechView />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

在这里，TechView成为主要的反应组件，通常也称为App。 因此，在这种情况下，我不会将文件命名为TechView.jsx，而是将其命名为App.jsx，而不是将类命名为TechView，而是将其命名为App。