React Child 组件无法访问上下文 API

Posted 2023-04-14

【中文标题】React Child 组件无法访问上下文 API

【英文标题】：React Child component cant access the context API

【发布时间】：2019-03-31 01:12:33

【问题描述】：

根据新的上下文 API 文档，子组件可以使用消费者访问/修改上下文，也可以使用动态上下文来做同样的事情，消费者一切正常，但我不想使用消费者方法，请检查下面的示例

import React,  Component, createContext  from 'react';
import  render  from 'react-dom';

const Context = createContext(theme: 'light', changeTheme: ()=>);

class ThemedText extends Component
  static contextType = Context;
  changeTheme()
    //i want t do some logi specific to this class component then change the context value
    this.context.changeTheme('dark');
  
  render()
    return <div>The theme color is this.context.theme <button onClick=()=>this.changeTheme()>Change</button></div>
  


class ThemedTextWithConsumer extends Component
  render()
    return(
      <Context.Consumer>
      (theme, changeTheme) => (
          <div>Theme is theme (Consumer)  <button onClick=()=>changeTheme('dark')>Change</button></div>
      )
      </Context.Consumer>
    )
  


class App extends Component
  constructor()
    this.state = 
      theme: 'light',
      changeTheme: this.changeTheme.bind(this)
    
  
  changeTheme(theme)
    this.setState(theme);
  
  render()
    return(
      <Context.Provider value=this.state>
        <ThemedText/>
        <ThemedTextWithConsumer/>
      </Context.Provider>
    )
  

第一个组件 ThemedText 是我想要使用的，因为我需要执行一些逻辑然后从上下文触发 changeTheme 函数

第二个组件 ThemedTextWithConsumer 工作正常，但据我所知，我只能在渲染函数内部使用上下文中的函数

如何使第一个组件 ThemedText 工作？

这是一个关于 StackBlitz

【参考方案1】：

您的 StackBlitz 演示中有两个问题。

首先：您正在使用 v16.5.0 进行反应，而新的 Context 更改是在 16.6.0 版本的 React 中推送的。您必须先更新依赖版本

第二：你没有在点击按钮时调用函数

更新代码：

class ThemedText extends Component
  static contextType = Context;
  changeTheme()
    //i want t do some logi specific to this class component then change the context value
    this.context.changeTheme('dark');
  
  render()
    return <div>The theme color is this.context.theme 
        <button onClick=()=>
          // call the function here 
          this.changeTheme()
           
         >
             Change
         </button>
      </div>
  

Working demo

如果您使用的是 version 16.3.0 to version prior to 16.6.0，请参阅 this 答案，了解如何在渲染之外使用上下文。

【讨论】：

完美，升级到 16.6 解决了问题，谢谢@Shubham

很高兴能帮上忙 :-)