反应组件通讯的方法

这篇文章主要讲解了反应组件通讯的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

父组件向子组件传值一般采用道具属性传递

父组件:

从& # 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>
　　)
　　}
　　}
 
  
 
看完上述内容,是不是对反应组件通讯的方法有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。
反应组件通讯的方法