Javascript 如何以编程方式提供和使用上下文？

所以我的问题很简单。在React js中，我想使用上下文将一些状态和处理程序从父对象传递给它的第三个孙子对象。我已经在jsx中实现了这一点，但是我想使用javascript o中的状态，在我完全输出状态之前，我有一些逻辑。 我把问题分为两部分。1）到目前为止我所做的。2）基本上我想做的事

1.）

//此文件仅存储上下文 MyContext.js

import React, { Component } from 'react';
export const  MyContext = React.createContext();

MyProvider.js//父类和子类使用该类访问提供程序

import React, { Component } from 'react';
import {MyContext} from '../MyContext'

class MyProvider extends Component {
    state = {
      name: 'Wes',
      age: 100,
      cool: true
    }
    render() {
      return (
        <MyContext.Provider value={{
          state: this.state,
          growAYearOlder: () => this.setState({
            age: this.state.age + 1
          })
        }}>
          {this.props.children}
        </MyContext.Provider>
      )
    }
  }

  export default MyProvider;

import React，{Component}来自'React'；
从“../MyContext”导入{MyContext}
类MyProvider扩展组件{
状态={
姓名：“Wes”，
年龄:100,，
酷：是的
}
render（）{
返回(
这是我的国家({
年龄：this.state.age+1
})
}}>
{this.props.children}
)
}
}
导出默认MyProvider；

//好的，现在我基本上跳过了父母，给你看消费者的孙子

Person.js

import React, { Component } from 'react';
// first we will make a new context
import { MyContext } from '../MyContext';



class Person extends Component {
  render() {
    return (
      <div className="person">
        <MyContext.Consumer>
          {(context) => (
            <React.Fragment>
              <p>Age: {context.state.age}</p>
              <p>Name: {context.state.name}</p>
              <button onClick={context.growAYearOlder}>I've based my answer solely from the docs itself(https://reactjs.org/docs/context.html#updating-context-from-a-nested-component)


import React, { Component } from 'react';
import { MyContext } from '../MyContext'

class MyProvider extends Component {
    constructor(props) {
        super(props)

        // I've moved the state declaration inside the constructor
        this.state = {
          name: 'Wes',
          age: 100,
          cool: true
        }

        // moved the function here and added prevState
        this.growAYearOlder = () => {
          this.setState(prevState => ({
            age: prevState.age + 1,
          }))
        };
    }

    render() {
      return (
        <MyContext.Provider value={{
          state: this.state,
          growAYearOlder: this.growAYearOlder,
        }}>
          {this.props.children}
        </MyContext.Provider>
      )
    }
}

export default MyProvider;

import React，{Component}来自'React'；
//首先，我们将创建一个新的上下文
从“../MyContext”导入{MyContext}；
类Person扩展组件{
render（）{
返回(
{（上下文）=>(
年龄：{context.state.Age}

名称：{context.state.Name}

我的回答完全基于文档本身（）

import React，{Component}来自'React'；
从“../MyContext”导入{MyContext}
类MyProvider扩展组件{
建造师（道具）{
超级（道具）
//我已经在构造函数中移动了状态声明
此.state={
姓名：“Wes”，
年龄:100,，
酷：是的
}
//将函数移到此处并添加了prevState
this.growtayearolder=（）=>{
this.setState（prevState=>({
年龄：prevState.age+1，
}))
};
}
render（）{
返回(
{this.props.children}
)
}
}
导出默认MyProvider；
有许多类似的问题，有正确的答案、文档、示例等等，但这个问题一直在我脑海中浮现

因此，如果您想获取上下文值并在组件的
render（）
中使用它，只需导入它（导出上下文本身而不仅仅是提供程序）并使用
\u currentValue

const contextData = useContext(MyContext);

class Main extends React.Component(){

  static contextType = MyContext;
  
  componentDidMount(){
    const contextData = this.context;
  }

  render() {
     return (
        <p>Hey</p>
     );
  }

请注意，您仍然必须使用给定的上下文提供程序包装组件

还要注意，对于功能组件，您需要使用
useContext
，例如

const contextData = useContext(MyContext);

class Main extends React.Component(){

  static contextType = MyContext;
  
  componentDidMount(){
    const contextData = this.context;
  }

  render() {
     return (
        <p>Hey</p>
     );
  }

对于类组件，您可以将上下文分配给静态变量，然后使用它，例如

class Main扩展了React.Component（）{
静态contextType=MyContext；
componentDidMount（）{
const contextData=this.context；
}
render（）{
返回(
哎

);
}

注意必须调用静态变量
contextType
，否则
这个。context
不会保存
MyContext
数据。
好的，那么在您的示例中孩子是如何使用的。这与我提供的代码已经提供的功能非常相似。我想要的是能够访问呈现函数外部的上下文值。传递context.Consumer范围内的上下文对象？就像传递给onClick一样？
onClick={（）=>handleClick（context）}
在handleClick函数中执行您的操作？似乎您希望在可以使用简单的react状态管理的情况下使用超出其范围的上下文？您必须记住上下文===全局。上下文的设计目的是提供/使用，而不仅仅是另一个本地状态处理。请阅读此处：好的，我不明白您的解决方案是如何on解决了我上面提到的问题。我想使用和修改父组件中的参数。我确信我可以在consumer的范围内简单地设置onclick方法。现在不要关注我的代码和它应该做什么。这只是一个示例。本质上我希望能够修改父组件的参数tate值并在子类中使用其函数。我还希望能够确定何时可以逻辑地使用所述参数。这只能在返回方法之前发生。请看我问题的第2部分。谢谢。很抱歉，在尝试理解时遇到一些困难，但我链接的文档可能会帮助您。您可能试图过度使用语境概念