Question

根据新的上下文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

Answer 1

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

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

第二：您不是在单击按钮

时调用了该函数

更新的代码：

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 答案，以了解如何在渲染之外使用上下文。

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

1 个答案: