使用 JSX 时必须在范围内获取“React”答案

【问题标题】：Getting 'React' must be in scope when using JSX使用 JSX 时必须在范围内获取“React”
【发布时间】：2020-09-11 14:23:41
【问题描述】：

我是新手，我尝试了以下代码

person.js

const element = <h1>Hello world</h1>;
export default element;

App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';



function Hello() {
  return Person.element;
}



class App extends Component {

  render() {

    return (
      <div className="App">
        <Hello></Hello>
      </div>
    );
  }
}

export default App;

但出现以下错误

work/my-app/src/person/person.js 使用 JSX react/react-in-jsx-scope 时，3:17 错误“React”必须在范围内

当我改为如下简单的打招呼词时，它就可以正常工作了。

person.js

const element = 'hello world';
export default element;

我通过查看不同的论坛尝试了不同的方法

导入 ReactDom
在 person.js 中更改为 module.exports=element

【问题讨论】：

您的导入文件必须位于文件的最顶部。
这两个都应该导入 react，并且你的导入应该放在文件的顶部。
从其他 cmets 来看，我认为您的导入可能需要位于文件的最顶部
我已经更新了这个问题。当我发布问题时，错误地 App.js 文件名出现在 javascript 代码之间，这就是它在两者之间显示导入的原因。

标签： javascript reactjs

【解决方案1】：

最新的 React 17 版本：范围内无需包含 React

如果您遇到 ESlint 或运行时 CRA 警告，请按照以下临时步骤进行修复，直到 CRA v4 发布：https://github.com/facebook/create-react-app/issues/9850

【讨论】：

【解决方案2】：

在 JS 代码中使用 HTML 被称为 JSX。 <h1>...</h1> 是 JSX。在使用 JSX 之前，您需要导入 React。只需在使用 JSX 之前转换 import 语句即可。

person.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';

const element = <h1>Hello world</h1>;
export default element;

【讨论】：

我已经更新了这个问题。当我发布问题时，错误地 App.js 文件名出现在 javascript 代码之间，这就是它在两者之间显示导入的原因。
@user414967 正如所有其他评论甚至其他答案所提到的，您需要在所有使用 JSX 的文件中导入 React。 person.js 也不例外。
事实上我试图避免对 React 的依赖。假设，如果这个 person.js 是一个第三方库，那么我们不能在那里导入 React。在这种情况下，我们该怎么办？
@user414967 只要你使用 JSX，你就需要导入 React。所以如果你不想导入 React，就不要在代码中使用 JSX。

【解决方案3】：

您需要在每个导出组件的文件中导入 React（本例中为 App）。

【讨论】：

我已经更新了这个问题。当我发布问题时，错误地 App.js 文件名出现在 javascript 代码之间，这就是它在两者之间显示导入的原因。