05 学习React 记录

1、Context的使用

        ① 在Src目录下创建store

        ② 使用React核心库，创建一个createContext()        

import React from 'react';

const TestContext = React.createContext({

})

export default TestContext;

        注意：createContext() 中要传递一个参数（可以是对象）   

    

        ③ 在 提供数据的页面中，先引入TestContext 组件，然后使用

        <TestContext.Provider value={ {要传递的参数} }></TestContext.Provider>

        在这里，因为要传递多个对象，所以在value中使用{ }

<TestContext.Provider value={{addMealHandler,subMealHandler,mealsData}}>
   <div>
      <Meals data={mealsData} onAdd={addMealHandler} onSub={subMealHandler}></Meals>
   </div>
</TestContext.Provider>

        ④ 还是先引入TestContext 组件， 然后 使用useContext()钩子函数使用TextContext

import TestContext from"../../../store/testContext"

 
const ctx = useContext(TestContext)
    const onAdd = ()=>{
        ctx.addMealHandler(props.data)
    }

    const onSub= ()=>{
        ctx.subMealHandler(props.data);
    }