1

我是 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;
4

1 回答 1

3

您在 中设置的值Provider将是在 中的 render props 函数中收到的参数Consumer，因此您不应访问您期望的数字，而context.value应更改为context。

于 2018-12-29T04:27:51.873 回答