react中组件间的通信

一、父传子

1.代码展示

javascript 复制代码
import React, { useState } from 'react';


function SonPage(props){ // 子组件
  const {msg} = props
  return (
    <div>
      我是子组件 {msg}
    </div>
  )
}


function App() { // 父组件
  const [msgText,setMsgText] = useState('父传子')
  return (
    <div className="App">
      <div>我是父组件</div>
      <SonPage msg={msgText} />
    </div>
  );
}

export default App;

2.代码说明

1.子组件名称命名采用大驼峰命名法;

2.<SonPage msg={msgText} />中的msg属性用来在子组件中获取父组件传递过来msgText,msgText是父组件传递过来的数据

3.在子组件中组件函数名中有个参数SonPage(props),所有父组件传递过来的数据都在该参数中

3.效果展示

二、子传父

1.代码展示

javascript 复制代码
import React, { useState } from 'react';


function SonPage(props){ // 子组件
  const {msg} = props // 解构:可以解构出传递过来的数据和方法
  const sonMsg = '子传父'
  return (
    <div>
      我是子组件 {msg}
      <button onClick={()=>props.getSonMsg(sonMsg)}>点击发送消息到父组件</button>
    </div>
  )
}


function App() { // 父组件
  const [msgText,setMsgText] = useState('父传子')
  const [sonMsgText,setSonMsgText] = useState('')
  function getSonMsg(sonMsg){
    setSonMsgText(sonMsg)
  }
  return (
    <div className="App">
      <div>我是父组件 {sonMsgText}</div>
      <SonPage msg={msgText} getSonMsg={getSonMsg}/>
    </div>
  );
}

export default App;

2.代码说明

1.子传父就相当于父传子,只不过父传子传递的是数据,而子传父传递的是方法;

2.<SonPage msg={msgText} getSonMsg={getSonMsg}/>,同样需要在子组件标签上定义一个属性(getSonMsg)用于子组件中获取父组件传递过来的方法(getSonMsg),命名上一般要求以on开头代表传递方法,我这里没用on开头是便于理解;

3.在子组件中组件函数名中有个参数SonPage(props),所有父组件传递过来的数据和方法都在该参数中,所以可以通过props.getSonMsg()来触发到父组件中的方法(getSonMsg);

4.该方法就是用来获取子组件传递过来的参数,有个参数就是子组件传递过来的数据

(getSonMsg(sonMsg))

3.效果展示

三、兄弟之间数据通信

1.代码展示

javascript 复制代码
import React, { useState } from 'react';



function AItem(props){
  const { onGetDataA } = props;
  const [msgA] = useState('组件A的数据')
  return (
    <div>
      我是子组件A 
    <button onClick={()=>onGetDataA(msgA)}>点击发送数据</button>
    </div>
  )
}
function BItem(props){
  const { getMsgAText } = props;
  return (
    <div>我是子组件B {getMsgAText}</div>
  )
}

function App() { // 父组件
  const [msgAText,setMsgAText] = useState()
  function getDataA(msgAText){
    setMsgAText(msgAText)
    console.log('msgAText',msgAText);
  }
  return (
    <div className="App">
      <div>我是父组件</div>
      <AItem onGetDataA={getDataA}/>
      <BItem getMsgAText={msgAText}/>
    </div>
  );
}

export default App;

2.代码说明

兄弟间的通信其实就是同时使用父传子和子传父;先是子传父,将A组件的数据传递给父组件,再是在父组件中将A组件传递过来的数据通过父传子传递给B组件

3.效果展示

四、隔代间的数据通信

1.代码展示

javascript 复制代码
import React, { useState, useContext, createContext } from 'react';


const MsgContext = createContext()

function AItem() {
  return (
    <div>
      <div>我是子组件A</div>
      <BItem />
    </div>

  )
}
function BItem() {
  const fatherMsg = useContext(MsgContext)
  return (
    <div>我是孙子组件B {fatherMsg}</div>
  )
}

function App() { // 父组件
  const fatherMsg = '父组件的数据'
  return (
    <div className="App">
      <MsgContext.Provider value={fatherMsg}>
        <div>我是父组件</div>
        <AItem />
      </MsgContext.Provider>
    </div>
  );
}

export default App;

2.代码说明

1.首先需要通过createContext创建上下文标签(MsgContext),命名需要采用大驼峰命名法;

2.需要在顶层组件中使用MsgContext.Provider标签,将子标签包裹起来;

3.在需要获取顶层组件数据的后代组件中使用useContext(MsgContext)钩子函数来获取;

4.隔代间的数据通信并不是说爷孙之间,而是有上下关系的组件,也就是不管隔了多少代,比如父子之间也是可以使用的;

5.所谓的顶层组件就是需要传递数据给后代组件的组件;

6.<MsgContext.Provider value={fatherMsg}>,除了fatherMsg是变量外都是固定写法,value属性是用于传递数据的属性

3.效果展示

相关推荐
安全系统学习25 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖41 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python