javascript - 无法在子组件中访问 c​​lass.contextType

Question

我想使用 Context API 制作一个简单的 React Web 应用程序。我想在父组件中初始化上下文对象，并希望在子组件中使用它using "class.contextType"。

我已阅读 link .

我尝试编写如下代码:

DrawArea.js//包含上下文提供程序和子组件的父组件

import React, {Component} from "react";
import DrawReflect from "./DrawReflect";
import "./DrawArea.css";

export const DrawToolContext = React.createContext();

class DrawArea extends Component{


    constructor(props){
        super(props);

        this.state = {
            drawTool: "line"
        };

    }

    render(){
        return (
            <div className="DrawArea">  
                <DrawToolContext.Provider value={this.state}>   
                    <div className="box reflect">   
                        <DrawReflect />
                    </div>
                </DrawToolContext.Provider>
            </div>
        );
    }
}

export default DrawArea;

DrawReflect.js//从 DrawArea 中获取上下文并使用它的子组件

import React, {Component} from "react";
import {DrawToolContext} from "./DrawArea";
import "./DrawReflect.css";

class DrawReflect extends Component{

    render(){
        return (
            <div className="DrawReflect">
                <p>test</p>
            </div>
        );
    }

}

DrawReflect.contextType = DrawToolContext;

export default DrawReflect;

但它返回错误说 -ReferenceError:初始化前无法访问“DrawToolContext”。

这是完整的错误堆栈:

Module.DrawToolContext
http://localhost:3000/static/js/main.chunk.js:473:107
Module../src/pages/draw/fragments/DrawReflect.js
D:/CommuMind/front-react/src/pages/draw/fragments/DrawReflect.js:17
  14 | 
  15 | }
  16 | 
> 17 | DrawReflect.contextType = DrawToolContext;
  18 | 
  19 | export default DrawReflect;
View compiled
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
Module../src/pages/draw/fragments/DrawArea.js
http://localhost:3000/static/js/main.chunk.js:476:70
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
Module../src/pages/draw/DrawPage.js
http://localhost:3000/static/js/main.chunk.js:335:77
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
Module../src/App.js
http://localhost:3000/static/js/main.chunk.js:145:78
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:247:62
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
D:/CommuMind/front-react/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:734:18
__webpack_require__
D:/CommuMind/front-react/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
checkDeferredModules
D:/CommuMind/front-react/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
D:/CommuMind/front-react/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:57

出了什么问题？？？

Answer 1

看起来你有一个循环依赖:

• 有人导入 DrawArea.js
• 在第 2 行，DrawArea.js 导入 DrawReflects.js
• 在第 2 行，DrawReflects.js 想要从 DrawArea.js 导入 DrawToolContext 但它还不存在。

这会扰乱 webpack 并抛出错误。

您可以尝试将以下行移动到另一个文件“DrawToolContext.js”

export const DrawToolContext = React.createContext();

这样，DrawArea.js 和 DrawReflects.js 都可以导入它，没有循环依赖。