Данные контекста не передаются во вложенный компонент: React + Typescript + ContextAPI

Question

Я использую контекст API , чтобы избежать сквозного сверления компонентов.У меня есть компонент, который имеет два всплывающих модальных (компонентов).Когда я пытаюсь получить данные контекста в компонентах Enclosing, но в модальном режиме я не получаю.Если я снова передам эти данные контекста в качестве реквизита этим модальным моделям, а затем, если я получу этот метод доступа реквизита, я смогу их получить.Куда я иду не так?Если я не ошибаюсь, этот контекст API не зависит от вложенных уровней, может кто-нибудь помочь мне здесь?

CacheContext.tsx

import React from "react";
const context = React.createContext(null);
export default context;

ContextProvider.tsx

import React, {Component} from "react";

import context from './CacheContext';

var TinyCache = require( 'tinycache' );
var cache = new TinyCache();

class ContextProvider extends Component {

    render() {
      return (
          <context.Provider value={cache}>
               {this.props.children}
          </context.Provider>
      );
    }
  }

  export default ContextProvider;

ComponentA.tsx

import * as React from "react";
import context from "../Utilities/CacheContext";

export default class ComponentA extends React.Component<{}, {}> {

  componentDidMount() {
    console.log(this.context) // I am able to the data here
  }

  render(){
    return(
        <Modal1/>   //if I pass this as context={this.context} then it works
        <Modal2/>
    )
  }
}
ComponentA.contextType=context;

Modal1.tsx

import * as React from "react";
import context from "../Utilities/CacheContext";

export default class Modal1 extends React.Component<{}, {}> {

   componentDidMount() {
    console.log(this.context) // I am unable able to the data here , If I use this.props.context and pass the context as props then I am able to get
  }

  render(){
    return(
        //some content
    )
  }
}
Modal1.contextType=context;

Answer 1

В новом API контекста (https://reactjs.org/docs/context.html#api) Вы должны использовать компонент context.Consumer, используя функцию в качестве дочернего элемента:

<context.Consumer>
  {cache => console.log(cache)}
</context.Consumer>

Если вам нужен кеш в componentDidMount, передайте кешк подкомпоненту, как это:

// render:
<context.Consumer>
  {cache => <SubComponent cache={cache}/>}
</context.Consumer>

// SubComponent:
class SubComponent {
  componentDidMount() {
    console.log(this.props.cache);
  }
}