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,useContext } 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,removeItem}=useContext(Context)

    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>
  )
}


//或者如下简洁表述:

import React, { useState, createContext, useContext } from "react"; 
const CountContext = createContext(0);
const Example = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <p>父组件点击数量：{count}</p>
      <button onClick={() => setCount(count + 1)}>{"点击+1"}</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  );
};
//页面中嵌套的子组件中使用 Context 传递的值
const Counter = () => {
  const count = useContext(CountContext);
  return <p>子组件获得的点击数量：{count}</p>;
};

export default Example;

 