关于reactjs：使用JSX react / react-in-jsx-scope时，’React’必须在范围内？


'React' must be in scope when using JSX react/react-in-jsx-scope?

我是Angular开发人员，是React的新手，这是简单的react Component，但无法正常工作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

时，"反应"必须在范围内

导入行应为：

1
import React, { Component }  from 'react';

注意React的大写字母R.

相关讨论

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

1
2
3
4
5
6
  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会为您完成此操作。

相关讨论

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

添加

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

位于文件顶部。

1
import React, { Component } from 'react';

这是一个拼写错误，您需要键入React而不是React。

相关讨论

按照图片所示消除该皮棉错误并通过package.json中的addin g--fix添加自动修复

enter

1
import React , { Component}  from 'react';

2nd或者您也可以尝试以下方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;

错误非常直接，您导入了react而不是React。

TechView.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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();

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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。