尝试使用 React 功能组件实现 ContextAPI答案

【问题标题】：Trying to implement ContextAPI with React functional components尝试使用 React 功能组件实现 ContextAPI
【发布时间】：2021-10-29 15:03:28
【问题描述】：

尝试构建一个简单的费用跟踪器，并希望将月收入状态分享给应用程序中的所有组件...在使用我的功能组件设置 ContextAPI 时遇到问题...对我的代码有什么问题有任何建议吗？（codepen 告诉我它无法读取属性“props”）

function App(){
  return(
    <ExpenseNumbersProvider>
      <div className="flex-container">
        <div className="left">
          <Input /> 
          <Graph />
        </div>
        <ExpenseLog />
      </div>
    </ExpenseNumbersProvider>
  )
};

function ExpenseNumbersProvider (){
  const ExpenseNumbers = createContext();
      
  const [monthly,setMonthly] = useState(0);
     
  return(
    <ExpenseNumbers.Provider value={{monthly}}>
      {this.props.children}
    </ExpenseNumbers.Provider>
  )
}

Codepen 链接：https://codepen.io/anthonybp12/pen/JjNqEeG

【问题讨论】：

标签： reactjs use-state react-functional-component codepen context-api

【解决方案1】：

您在功能组件的上下文中使用this。将this.props.children 替换为props.children ...您还需要将props 作为ExpenseNumbersProviders 的参数传入

function ExpenseNumbersProvider (props){
  const ExpenseNumbers = createContext();
  
  const [monthly,setMonthly] = useState(0);
  
  return(
    <ExpenseNumbers.Provider value={{monthly}}>
      {props.children}
    </ExpenseNumbers.Provider>
  )
}

【讨论】：