一、是什么
通信指的是发送者通过某种媒体 以某种格式来传递信息 到收信者以达到某个目的,广义上,任何信息的传递都是通信
二、如何通信?
组件传递的方式有很多种,根据传送者和接收者可以分为如下:
- 父组件向子组件传递
- 子组件向父组件传递
- 兄弟组件之间的通信
- 父组件向后代组件传递
- 非关系组件传递
1、父组件向子组件传递数据
由于React
的数据流动为单向的,父组件向子组件传递是最常见的方式
父组件在调用子组件的时候,只需在子组件的标签内传递参数,子组件通过props属性就能接收到父组件传递过来的参数
//父组件给子组件数据 //方法=》通过属性方式 function App(){ let money = 100 const changes = ()=>{ } return( <div> 父亲 {/* 父组件给子组件数据通过属性方式 */} {/* 本质 =》元素(组件) =》添加属性 这个属性会被react 底层自动处理成 这个函数的参数 =》{}类型 */} <Children money={money} data='5000' change = {changes}></Children> </div> ) } //在子组件种通过props 接收 // Children function Children(props){ console.log(props); //money={money} data='5000' change = {changes}
return( <div className="children">Children get father {props.money}</div> ) } export default App
2、子组件向父组件传递数据
子组件向父组件通信的基本思路是,父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值
//组件的数据传递 //子组件给父组件数据 //解决方法 =》通过自定方法 //本质=》函数的声明和函数调用 //实现 =》 //1 父组件给子组件传递数据数据 // 2在子组件中给父组件数据 function App(){ //1在父组件中声明方法 const getChildren = (value)=>{ console.log('获取到子组件的数据',value); } return( <div> 父亲 {/* 2在把这个方法传递给子组件 */} <Children getChildren={getChildren}></Children> </div> ) } function Children(props){ const getFather =()=>{ //3在子组件中调用父组件申明的方式 props.getChildren(10000) } return( <div className="children"> <button onClick={()=>getFather()}>给父组件数据</button> </div> ) } export default App //总结子组件给父组件数据 // 本质就是函数的声明和调用 //1 在父组件中声明方法 //2 在子组件中调用这个方法
3、兄弟组件之间的通信
如果是兄弟组件之间的数据传递,则父组件作为中间层来实现数据的互通,通过使用父组件传递
4、父组件向后代组件传递数据
父组件向后代组件传递数据是一件最普通的事情,就像全局数据一样
使用useContext提供了组件之间通信的一种方式,可以共享数据,其他数据都能读取对应的数据
标签:传递,通信,react,传递数据,props,组件,数据 From: https://www.cnblogs.com/chccee/p/17021048.html