useContext简单使用

如果需要在组件之间共享状态，可以使用useContext()。

先引入createContext并创建一个Context

const ContContext = createContext()

需要共享状态的组件使用.Provider包裹，需要共享的数据放在value中

<ContContext.Provider value={count}>
    <TestCom />
</ContContext.Provider>

完整代码

import { useState, createContext, useContext } from 'react';
import { Button } from "antd";

const ContContext = createContext()

function TestCom() {
    let count = useContext(ContContext)
    return (
        <h2>
            测试子组件:{count}
        </h2>
    )
}

function Demo04() {

    const [count, setCount] = useState(0)

    return (
        <div>
            <h1>{count}</h1>
            <Button onClick={() => { setCount(count + 1) }}>点击按钮+1</Button>

            <ContContext.Provider value={count}>
                <TestCom />
            </ContContext.Provider>
        </div>
    )
}

export default Demo04

效果如图