React Context не передает данные своим дочерним компонентам

Question

Я новичок в React.Глядя на несколько средних статей и React-документы (что сложно), я попытался реализовать этот очень базовый Context API .
. Я упустил некоторые основные положения, из-за которых я не получилправильный результат - передача данных через дерево компонентов и доступ к ним в дочернем компоненте.
Пожалуйста, дайте мне знать, как исправить с учетом фрагмента кода и что я пропустил.

import React from 'react';
import './index.css';

const AppContext = React.createContext();

function GreenBox () {
  return <div className='green-box'>
    <AppContext.Consumer>
      {(context) => context.value}
    </AppContext.Consumer>
  </div>
}
function BlueBox () {
  return <div className='blue-box'><GreenBox/></div>
}
class RedBox extends React.Component {
  render() {
    return <div className='red-box'>
      <AppContext.Consumer>
        {(context) => context.value}
      </AppContext.Consumer>
      <BlueBox/>
      </div>
  }
}

class Context extends React.Component {
  state = {
    number: 10
  }
  render() {
    return (
      <AppContext.Provider value = {this.state.number}>
        <RedBox/>
      </AppContext.Provider>
    )
  }
}

export default Context;

Answer 1

Значение, установленное в Provider, будет аргументом, полученным в функции рендеринга реквизитов в Consumer, поэтому вместо доступа к ожидаемому номеру с помощью context.value вам просто нужно изменить на context.