Question

我正在遵循第5章＆＃34;与JSX和＃34; ＆＃34;学习反应＆＃34;来自O＆＃39; reilly。

我使用create-react-app作为基础编写了食谱应用程序。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import data from './data/recipes';
import Menu from './Menu';

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.

本书说＆＃34;设置window.React to React在浏览器中全局公开React库。这样，所有对React.createElement的调用都可以保证工作＆＃34;。但似乎我仍然需要将“反应”从“反应”＆＃39 ;;＆＃34;在每个使用JSX的文件上。

Answer 1

在您的Menu.js文件上导入React：

import React from 'react'

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

Answer 2

发生这种情况是由于JSX文件中必须进行“反应”导入。由于JSX会作为React进行编译，因此React库也必须始终在JSX代码的范围内。

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

import React from "react";

this is an error most beginner react developers made.

And also You can refer

Answer 3

这是因为不从'react'属性中导入React模块，因此您可以尝试导入模块，并在声明函数时尝试使用'export'，以便使用'import {菜单}，如下所示

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 4

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

import React from 'react'

Answer 5

导入反应

import React from 'react'

这应该有效

＆＃39;阵营＆＃39;当使用JSX react / react-in-jsx-scope与＆＃34; window.React = React＆＃34;时必须在范围内在index.js上

5 个答案: