标签：传递 const context React react TestContext Context import

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。