“使用 JSX 时 React 必须在范围内”（react/react-in-jsx-scope with "window.React = React" on index.js）

Question

我正在关注 O'Reilly 的“Learning React”的第 5 章“React with JSX”。

我使用

create-react-app

作为基础编写了食谱应用程序。

index.js

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

import './index.css';

import App from './App';
import Menu from './Menu';

import registerServiceWorker from './registerServiceWorker';

import data from './data/recipes';

window.React = React;

ReactDOM.render(<Menu recipes={data} />, document.getElementById('root'));

registerServiceWorker();

Menu.js

import Recipes from './Recipes';

const Menu = ({recipes}) => (
    <article>
        <header>
            <h1>Delicious Recipes</h1>
        </header>
        <div className = "recipes">
        {recipes.map((recipe, i)=>    
            <Recipes key={i} {...recipe}  />
        )}
        </div>
    </article>
);

export default Menu;

并出现以下错误：

Failed to compile ./src/Menu.js
  Line 5:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 6:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 7:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 9:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 11:  'React' must be in scope when using JSX  react/react-in-jsx-scope
    
Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

这本书说“将

window.React

设置为

React

会在浏览器中全局公开React库。这样所有对

React.createElement

的调用都可以确保正常工作”。但似乎我仍然需要在每个使用 JSX 的文件上导入 React。

Answer 1

在 Menu.js 文件之上导入 React：

import React from 'react'

React 应始终导入到特定文件中，如果您在项目中使用此库（React），则该文件使用 JSX。

Answer 2

在 React 17 中不需要导入。 我们可以在不从 React 导入 React 的情况下编写代码

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

随着 React 17 的发布，我们想做一些 对 JSX 转换的改进，但我们不想破坏 现有设置。这就是为什么我们与 Babel 合作提供一个新的， 为想要的人重写的 JSX 转换版本 升级。

升级到新的转换是完全可选的，但它有一个 几个好处：

• 有了新的转换，你可以在不导入 React 的情况下使用 JSX。

eslint 默认的 react 配置仍然会发出警告。但这可以被禁用：

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md

如果你正在使用来自 React 17 的新 JSX 转换，你应该 通过在 eslint 配置中扩展 react/jsx-runtime 来禁用此规则 （将“插件：反应/jsx-runtime”添加到“扩展”）。

Answer 3

这是由于 JSX 文件中需要“React”导入。 React 库也必须始终在 JSX 代码的范围内，因为 JSX 编译为一个 React。

在您的情况下，必须在 Menu.js 中导入“React”，

import React from "react"; 

这是大多数初学者 React 开发人员所犯的错误。

也可以参考

Answer 4

这是因为没有从“react”属性导入 React 模块，因此您可以尝试导入模块并在声明函数时尝试使用“export”，以便使用“import {Menu}”将它们导入其他页面很容易从菜单'如下所示

import React from 'react';
import Recipes from './Recipes';

export const Menu = ({recipes}) => (
    <article>
        <header>
            <h1>Delicious Recipes</h1>
        </header>
        <div className = "recipes">
        {recipes.map((recipe, i)=>    
            <Recipes key={i} {...recipe}  />
        )}
        </div>
    </article>
);

Answer 5

2022 年更新

导入

React

被认为是“未使用的导入”，建议长期删除，参见 react 文档.

我在设置 linter 时遇到了这个错误，eslint 文档 也指出了这一点，您不需要从 React 版本 17 额外导入。