react中组件间的通信

news2024/11/23 22:33:07

一、父传子

1.代码展示

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.代码展示

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.代码展示

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.代码展示

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;