如果需要在组件之间共享状态,可以使用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
效果如图