React中的context 数据传递

1.定义 js文件

import React from 'react'
/**  *  * Context 相当于一个公共的存储空间,  *      我们可以将多个组件中都需要访问的数据统一存储到一个Context中,  *      这样无需通过props逐层传递,即可使组件访问到这些数据  *        *      通过React.createContext()创建context  */
  const TestContext = React.createContext({         name:'孙悟空',         age:18,
    })
  export default TestContext;     2.使用context(一.)   import React from 'react' import TestStore from '../store/testContext.js' export default function TestContext() {   return (     <TestStore.Consumer>         {(ctx)=>{            return (             <div>                 {ctx.name}             </div>            )         }}     </TestStore.Consumer>   ) }   3.使用context(二.使用钩子函数)   import React from 'react' import { useContext } from 'react' import TestStore from '../store/testContext'
export default function TestContext() {     const ctx=useContext(TestStore)      /**      *      * 使用Context方式二:      *      1.导入Context      *      2.使用钩子函数useContext()获取到context      */   return (         <div>
        <h3>{ctx.name}</h3>
    </div>
  ) }   4.通过.Provider value属性 修改Context中的值 子类继承获取修改后的值   import React from 'react' import { useState } from 'react' import Context from '../store/testContext.js' import TestContext from './TestContext.jsx' export default function A() {     const [cartData,setCartData]=useState({         items:[],         totalAmount:0,         totalPrice:0     })
    const addItem=()=>{         const newCart={...cartData}         newCart.totalAmount+=1         setCartData(newCart)     }
    const removeItem=()=>{
    }
  return (     <div> 　　　　//父类通过value修改         <Context.Provider value={ {...cartData,age:1300,name:'沙和尚', addItem,removeItem } }> 　　　　//子类将接收到 value中修改之后的值
        <TestContext></TestContext>           </Context.Provider>     </div>   ) }

 

标签：传递,const,context,React,react,TestContext,Context,import
来源： https://www.cnblogs.com/daxiong182/p/16391117.html