反应组件通讯的方法

  介绍

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

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

父组件:

从& # 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>
  )
  }
  }

反应组件通讯的方法

看完上述内容,是不是对反应组件通讯的方法有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。

反应组件通讯的方法