react共享钩子useContext()

97 阅读1分钟

react共享钩子的场景:多个组件之间需要共享数据的时候使用。

const ComContext = React.createContext({}) 
<ComContext.Provider value={{ setTransData, transData, setMoldData, moldData }}>
     <A ComContext={ComContext} />
     <B ComContext={ComContext} />}
</ComContext.Provider>

A组件
const { setMoldData, setTransData } = useContext(ComContext)
const onChange = (val) => {
setTransData(val) // 使用setTransData动态的改变值,
}

B组件
const { transData, moldData } = useContext(ComContext);
console.log(moldData, transData, '111') // 拿到当前值

所以说,ComContext里面的value值是可以被子组件共享的

赞我.png