useReact的應(yīng)用場景：在組件間共享狀態(tài)
假設(shè)現(xiàn)在有兩個組件活烙，想要共享狀態(tài)碉纺，可以使用
React.createContext創(chuàng)建一個context對象船万，為了方便在所有的組件中共享狀態(tài)，我將創(chuàng)建context的文件抽離為 creatContext.js
#creatContext.js
import { createContext } from 'react'
const FatherContext = createContext()
export default FatherContext;
組件1：
# Child1
import React, { useContext } from 'react'
import FatherContext from '../context/creatContext'
export default function Child1() {
const { username } = useContext(FatherContext)
return (
<>
<h1>child1的username============={username}</h1>
</>
)
}
組件2：
#Child2
import React, { useContext } from 'react'
import FatherContext from '../context/creatContext'
export default function Child2() {
const { username } = useContext(FatherContext)
return (
<>
<h1>Child2的username============={username}</h1>
</>
)
}
父組件：
# FatherCom
import React from 'react'
import Child1 from './child1'
import Child2 from './child2'
// context對象
import FatherContext from '../context/creatContext'
export default function FatherCom() {
return (
<div>
我是父組件
<FatherContext.Provider value={{ username: '小明小紅' }}>
<div>
<Child1></Child1>
<Child2></Child2>
</div>
</FatherContext.Provider>
</div>
)
}
運行結(jié)果
image.png
文件結(jié)構(gòu)：
image.png
