介绍
这篇文章主要讲解了反应组件通讯的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
父组件向子组件传值一般采用道具属性传递
父组件:
从& # 39;进口反应反应# 39; 从& # 39;进口孩子。/孩子# 39; const dataList=[ {id: & # 39; 001 & # 39;,价值:& # 39;张三& # 39;}, {id: & # 39; 002 & # 39;,价值:& # 39;李四& # 39;} ] const父母=道具=比;{ 回报( & lt; ul> & lt;孩子dataList={dataList}祝辞& lt;/Child> & lt;/ul> ) } 出口默认的父
子组件:
从& # 39;进口反应反应# 39; const孩子=道具=比;{ 回报( & lt; React.Fragment> { props.dataList。地图(项=比;& lt;李关键={item.id}在{item.value} & lt;/li>) } & lt;/React.Fragment> ) } 出口默认孩子
子组件调用父组件传过来的回调函数来更改父组件的状态
父组件
进口反应,{useState} & # 39;反应# 39; 从& # 39;进口孩子。/孩子# 39; const父母=道具=比;{ const[计数,setCount]=useState (0) 回报( & lt;儿童={数}setCount={setCount}祝辞& lt;/Child> ) } 出口默认的父
子组件
从& # 39;进口反应反应# 39; const孩子=道具=比;{ 回报( & lt; React.Fragment> & lt;按钮alt="反应组件通讯的方法">
上下文是一个全局变量,像是一个大容器,在任何地方都可以访问的到,我们可以把要通信的信息放在背景上,然后在其他组件中可以随意取到;
但是反应官方不建议使用大量的背景下,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道上下文是从哪里传过来的;而且上下文是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首。父组件
进口反应,{useState} & # 39;反应# 39; 从& # 39;进口孩子。/孩子# 39; 出口const MyContext=React.createContext(& # 39;你好# 39;) const父母=道具=比;{ 回报( & lt; MyContext。供应商价值=https://www.yisu.com/zixun/"世界"> <孩子/> ) } 出口默认的父子组件
从& # 39;进口反应反应# 39; 从& # 39;进口儿子。/儿子# 39; const孩子=道具=比;{ 回报( & lt;儿子/比; ) } 出口默认孩子孙组件
从& # 39;进口反应反应# 39; 从& # 39;进口{MyContext}。/父# 39; 出口的默认类儿子延伸反应。组件{ 呈现(){ 回报( & lt; MyContext.Consumer> { 上下文=比;& lt; div>{上下文}& lt;/div> } & lt;/MyContext.Consumer> ) } }
看完上述内容,是不是对反应组件通讯的方法有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。
反应组件通讯的方法