JSX react/react-in-jsx-scope를 사용할 때 'React'가 범위에 있어야 합니까?

JSX react/react-in-jsx-scope를 사용할 때 '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'가 범위에 있어야 합니다.

Import 행은 다음과 같습니다.

import React, { Component }  from 'react';

React의 대문자 R에 주목합니다.

을 " " " 에 추가합니다..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
  }

왜요? 사용 중인 경우 파일 맨 위에 가져올 필요가 없습니다. nextjs가 이를 대신합니다.

참조: https://gourav.io/blog/nextjs-cheatsheet (Next.js cheatsheet)

React v17을 사용하는 경우 eslint 구성 파일에서 규칙을 안전하게 비활성화할 수 있습니다.

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

아직 인정받는 솔루션을 입수하지 못한 고객:

더하다

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

파일 맨 위에 있습니다.

17+를 하고 있는 React 17+에 ..eslintrc:

{
  "extends": ["plugin:react/jsx-runtime"]
}

다음 리액트(React)와 파일에 한 .App.jsx api api api api api api api api api api api api api api api api api api api import api api api api api api api useEffectsyslog.

import React, { Component } from 'react';

입니다. . 입력해야 합니다.Reactreact.

"plugin:react/jsx-runtime"eslint 컨피규레이션파일로 확장하려면 , 「react-in-displayx-displays」를 참조해 주세요.

of of of of 의 경우import React from 'react'를 사용하는 jsx 「」, 「」의 react-require babel "babel":

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

react-require를 .babelrc에 추가합니다.이 플러그인은 ES2015 모듈 구문을 사용하여 React를 범위로 가져오므로 transform-es2015-modules-commonjs 플러그인 전에 정의해야 합니다.

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

출처 : https://www.npmjs.com/package/babel-plugin-react-require

오류는 매우 간단합니다. 반응 대신 반응을 가져왔습니다.

제 경우 src 폴더의 index.js 파일에 이 두 줄을 포함시켜야 했습니다.

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

당신의 경우, 이것은 다를 수 있습니다.클래스 기반 구성요소를 사용하는 경우 구성요소를 포함해야 할 수 있습니다.

import React, { Component }  from 'react';

eslint 를 사용하고 있는 경우는, 상기의 코멘트에서 몇개의 솔루션을 얻을 수 있습니다.

더 잘 알고 있다

react 프레임워크를 사용할 때는 먼저 react에서 react를 가져와야 하며 Import 후에는 항상 첫 번째 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;

저도 비슷한 문제가 있었어요.

메인 컴포넌트에 아래의 코드를 추가한 후 수정되었습니다.App.js 다른 컴포넌트가 있는 경우 해당 파일에도 react를 Import하십시오.

import React from "react";

JSX를 사용하여 React에서 커스텀 컴포넌트를 만들 때마다 다음과 같은 도움을 받아 하위 호환 JS 코드로 변환됩니다.Babel.
JSX는 React.createElement로 컴파일되므로React라이브러리는 항상 범위 내에 있어야 합니다.

예:

다음 커스텀 컴포넌트:

<MyButton color="blue" shadowSize={2}> Click Me </MyButton>

다음과 같이 변환됩니다.

React.createElement(MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')
^^^^^

변환된 코드가 필요하기 때문에React라이브러리, 스코프로 Import해야 합니다.

React Docs 레퍼런스

수정: Import React

import React from 'react';
// or
import * as React from 'react';

골라주세요.사용자에 따라 다르니까!

주의:
React 17+ 에서는 Import는 할 수 없습니다만, 이러한 Import를 추가하는 것이 좋습니다.importsESLint로 인해 오류가 발생할 수 있으므로 주의해야 합니다.

ESLint 설정 파일에서 규칙을 비활성화할 수 있습니다(.eslintrc.json) 다음 오류를 무시하려면:

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

이는 'react'에서 잘못된 모듈 반응을 가져오기 때문에 발생하는 오류입니다. 이 작업을 시도해 보십시오. 첫 번째

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;

나는 이 이슈를 내가 한번 사용했을 때 갖게 되었다.npm audit fix --force그래서 다운그레이드 된다.react-scripts버전 2로 이행하면 강제로 설치하게 됩니다.eslint버전 5에서 문제가 쇄도하기 시작했습니다.이 문제를 해결하기 위해 다시 업데이트했습니다.react-scripts일이 잘 풀렸어요또, 그 유저에 대해서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'] }],
    ...
  },
}

react-scripts 버전을 최신 버전으로 업그레이드하면 문제가 해결되었습니다.

react-scripts 버전 0.9.5를 사용하여 5.0.1로 업그레이드했습니다.

한 가지 깨달은 것은 React를 "react"에서 Import하는 것입니다.그것은, 「react가 아닌,import react , { Component} from 'react'; 제가 한 다른 일은

(1) index.disc 파일에 다음 행을 추가합니다.

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

동작하지 않는 경우는, 다음의 행을 추가합니다.ReactDOM import ReactDOM from "react-dom/client";대신import ReactDOM from 'react-dom'

(2) eslint 구성 파일의 속성을 다음과 같이 변경한다.

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

그러나 React 17부터는 Dont가 import React from 'react'와 다음 js를 추가해야 합니다.

아래 라인이 이 문제를 해결해 주었습니다.

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

이게 도움이 되길 바라.

그림과 같이 보풀 오류를 제거하고 패키지에 addin g--fix를 추가하여 자동 수정을 추가합니다.json

언급URL : https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope