React должен быть в области видимости при использовании JSX (react/react-in-jsx-scope с window.React = React on index.js)

Я следую главе 5, React with JSX, книги Learning React от O'Reilly.

Я написал приложение Recipes, используя 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 гарантированно сработают. Но похоже, что мне все еще нужно импортировать React для каждого файла, использующего JSX.


reactjs create-react-app react-dom jsx
person ohkts11    schedule 17.03.2018    source источник

Ответы (5)


arrow_upward
25
arrow_downward

Импортируйте React поверх файла Menu.js:

import React from 'react'

React всегда следует импортировать в определенный файл, который использует JSX, если вы работаете с этой библиотекой (React) в своем проекте.

person Eduard    schedule 17.03.2018

arrow_upward
4
arrow_downward

Это происходит из-за необходимости импорта «React» в файл JSX. Библиотека React также всегда должна находиться в области действия кода JSX, поскольку JSX компилируется как реакция.

в вашем случае «React» должен быть импортирован в Menu.js,

import React from "react";

это ошибка большинства начинающих разработчиков React.

А также Вы можете ссылаться

person ricky    schedule 24.10.2019

arrow_upward
0
arrow_downward

Это происходит из-за того, что модуль React не импортируется из свойств «реагировать», поэтому вы можете попробовать импортировать модуль и попробовать использовать «экспорт» при объявлении функции, чтобы их было легко импортировать на другие страницы, используя «импорт {Меню} из меню», как показано ниже

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>
);
person Lamech Desai    schedule 14.08.2020
comment
добавьте некоторый контекст, чтобы объяснить, как ваш ответ решит проблему, что действительно поможет сообществу в долгосрочной перспективе - person Arun Vinoth; 15.08.2020

arrow_upward
0
arrow_downward

В последнем обновлении реакции нет необходимости использовать, мы можем писать код без импорта реакции из React

import React from 'react'
person vibhu    schedule 23.02.2021

arrow_upward
0
arrow_downward

импортировать

import React from 'react'

это должно работать

person MD SHAYON    schedule 14.03.2021