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.

React Context 没有将数据传递给它的子组件

React Context not passing data to its child components

reactjs

react-context