useContext解决原先父子之间传值的问题

基础使用

演示地址

import React, { useState, createContext, useContext} from 'react'

const CountContext = createContext(); // 创建一个共享的组件，可以在jsx中使用

const Counter = () => {
    let count = useContext(CountContext);
    return (
        <h2>{ count }</h2>
    )
}

const Test = () => {
    const [count, setCount] = useState(0)
    
    return (
        <div>
            <p>clicked:{ count }</p>
            <button onClick={() => {setCount(count + 1)}}>click</button>
            <CountContext.Provider value={count}>
                <Counter />
            </CountContext.Provider>
        </div>
    )
}
export default Test

1、需要先使用const CountContext = createContext()来创建一个用来存储的玩意（不知道应该怎么称呼）。
2、在父级当中使用<CountContext.Provider>固定成对标签，value为需要传递的值传什么些什么，标签中为需要接受值的子组件
3、在子组件中使用useContext(上面定义的标签：CountContext)来获取传递的值；
4、如果父子组件分别为不同的文件、那么可以单独将如下代码单独建立文件抛出后使用import CountContext from './文件名'调用

import { createContext} from 'react'
const CountContext = createContext(); // 创建一个共享的组件，可以在jsx中使用

export default CountContext