React类组件如何访问Context变量？解决useContext报错问题

你遇到的报错核心原因很明确：React Hooks仅允许在函数组件或自定义Hook中调用，类组件并不支持Hooks语法，哪怕你把useContext代码移到类内部也不行。

因为你的Frage是继承自Rete.Component的类组件，我们可以用类组件兼容的方式来获取Context，这里提供两种常用方案：

方案1：使用contextType属性（单场景首选） #

这种方法适合只需要获取单个Context的场景，步骤简单直接：

import ChatbotContext from "../../Context/Chatbot/chatbotContext";

class Frage extends Rete.Component {
  // 给类绑定Context的静态属性
  static contextType = ChatbotContext;

  constructor() {
    super("Frage");
    // 在constructor中通过this.context访问Context值
    const { value } = this.context;
    console.log(value);
  }

  builder(node) {
    // 在builder方法中同样可以访问context
    const { value } = this.context;
    console.log(value);

    var inp = new Rete.Input("input1", "Input", numSocket, true);
    var out1 = new Rete.Output("output1", "Correct", numSocket, false);
    var out2 = new Rete.Output("output2", "Incorrect", numSocket, false);
    var ctrl1 = new MyControl(
      this.editor,
      node,
      "chatbottext",
      "Welches ist der höchste Berg der Welt?"
    );

    // 别忘了把创建的元素添加到node上（原代码遗漏了这一步）
    node.addInput(inp).addOutput(out1).addOutput(out2).addControl(ctrl1);
  }
}

方案2：使用ChatbotContext.Consumer组件（多Context/渲染场景） #

如果需要在渲染逻辑中使用Context，或者需要同时获取多个Context，推荐用Consumer组件：

import ChatbotContext from "../../Context/Chatbot/chatbotContext";

class Frage extends Rete.Component {
  constructor() {
    super("Frage");
  }

  builder(node) {
    var inp = new Rete.Input("input1", "Input", numSocket, true);
    var out1 = new Rete.Output("output1", "Correct", numSocket, false);
    var out2 = new Rete.Output("output2", "Incorrect", numSocket, false);
    
    // 通过Consumer包裹需要用到Context的组件，传递Context值
    var ctrl1 = (
      <ChatbotContext.Consumer>
        {({ value }) => (
          <MyControl
            editor={this.editor}
            node={node}
            name="chatbottext"
            defaultValue="Welches ist der höchste Berg der Welt?"
            // 把Context中的value传递给MyControl
            contextValue={value}
          />
        )}
      </ChatbotContext.Consumer>
    );

    node.addInput(inp).addOutput(out1).addOutput(out2).addControl(ctrl1);
  }
}

额外注意事项： #

• contextType一次只能绑定一个Context，多Context场景优先选Consumer
• 确保你的ChatbotContext是通过React.createContext()创建的，并且在组件树的上层存在ChatbotContext.Provider提供值
• 原代码中builder方法创建了输入、输出和控件但未添加到node上，一定要补充node.addXXX()的步骤，否则这些元素不会生效

内容的提问来源于stack exchange，提问作者Rainer Winkler