react-useContext跨组件通信

最新推荐文章于 2023-04-14 11:17:45 发布

weixin_48112768

最新推荐文章于 2023-04-14 11:17:45 发布

阅读量382

点赞数 1

文章标签： react.js

本文链接：https://blog.csdn.net/weixin_48112768/article/details/124249538

版权

本文介绍了如何在React应用中使用 createContext 和 useContext 进行跨组件的数据传递，包括创建Context、Provider的使用以及Consumer的实例化，同时强调了确保组件间通信时须共享同一Context的重要性。

摘要由CSDN通过智能技术生成

useContext

# 一般app 或者是index.jsx根组件
import { createContext } from 'react'

export const Context = createContext()
state = {
    count:100
}
return <Context.Provider value={{
        count:this.state.count
    }}>
    	
    <Context.Provider/>


# 跨组件通信的组件  必须使用同一个context
import { Context } from './index.jsx'
export default function Zi() {
    
    return <Context.Consumer>
        {(value)=><h1>{value}<h1/> }
        <Context.Consumer/>
    
}

# 跨组件通信的组件  必须使用同一个context
import { Context } from './index.jsx'
import { useContext } from 'react'
export default function Zi() {
    const value = useContext(Context)
    return (<h1>{value}<h1/>)
}