ReferenceError：React 没有为上下文定义

Question

import './App.css';
import ComponentC from './components/ComponentC';

export const UserContext = React.createContext()
function App() {
  return (
    <div className="App">
      
      <UserContext.Provider value={"deneme"}>
        <ComponentC />
      </UserContext.Provider>

    </div>
  );
}

export default App;


import React from 'react'
import ComponentE from './ComponentE'

function ComponentC() {
    return (
        <div>
            <ComponentE />
        </div>
    )
}

export default ComponentC

import React from 'react'
import ComponentF from './ComponentF'


function ComponentE() {
    return (
        <div>
            <ComponentF />
        </div>
    )
}

export default ComponentE

import React from 'react'
import { UserContext } from "../App"


function ComponentF() {
    return (
        <div>
            <UserContext.Consumer>
                {
                    user => {
                        return <div>User Context value {user}</div>
                    }
                }
            </UserContext.Consumer>

        </div>
    )
}

export default ComponentF

我有错误 ReferenceError: React is not defined，我不明白为什么我对 react.js 这么陌生，所以我需要一些帮助。 谢谢。

Answer 1

你需要以某种方式实际拉入 React 库，在你的 HTML 页面中使用脚本标签，例如

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

我建议在此处查看文档： https : //reactjs.org/docs/getting-started.html#try-react ，以获得入门和开始的建议。

Answer 2

你忘记添加import React from 'react'; 在顶部因此错误。

Answer 3

请从react导入React元素

import './App.css';
import React from 'react'; // add line here

export const UserContext = React.createContext();
function App() {
  return (
    .....
  );
}

export default App;