Question

我想使用Context API创建一个简单的React Web应用程序。我想在父组件中初始化上下文对象，并想在子组件中使用“ 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想要导入DrawToolContext DrawArea.js，但它尚不存在。

这使webpack混乱并引发错误。

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

export const DrawToolContext = React.createContext();

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

无法访问子组件中的class.contextType

1 个答案: