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中的render props函数中接收到的参数，因此，应该访问context.value中期望的数字，而不是只需更改为context。

React Context没有将数据传递到其子组件

1 个答案: