“使用 JSX 时，React 必须在范围内”（react/react-in-jsx-scope 与 index.js 上的“window.React = React”）答案

【问题标题】："React must be in scope when using JSX" (react/react-in-jsx-scope with "window.React = React" on index.js)“使用 JSX 时，React 必须在范围内”（react/react-in-jsx-scope 与 index.js 上的“window.React = React”）
【发布时间】：2018-08-26 09:48:11
【问题描述】：

我正在关注 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。

【问题讨论】：

标签： reactjs jsx create-react-app react-dom

【解决方案1】：

在 Menu.js 文件的顶部导入 React：

import React from 'react'

如果您在项目中使用此库 (React)，则应始终将 React 导入到使用 JSX 的特定文件中。

【讨论】：

【解决方案2】：

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

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

import React from "react";

this is an error most beginner react developers made.

And also You can refer

【讨论】：

【解决方案3】：

这是因为没有从 'react' 属性导入 React 模块，因此您可以尝试导入模块并在声明函数时尝试使用 'export' 以便使用 'import { 在其他页面中轻松导入它们Menu} from 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>
);

【讨论】：

添加一些上下文来解释你的答案将如何解决问题，从长远来看这将真正帮助社区

【解决方案4】：

in 最新更新的 react 不需要使用我们可以在不从 React 导入 react 的情况下编写代码

import React from 'react'

【讨论】：

【解决方案5】：

导入反应

import React from 'react'

这应该可以工作

【讨论】：