React（5）

一路向前的月光2025-02-13 21:31

组件通信

父子通信

父传子

javascript 复制代码

// 父传子
function Son(props){
  console.log(props);
  
  return(
    <div>这是子组件  {props.msg}</div>
  )
}

function App() {
  const msg='父组件数据'
  const msg2='父组件数据2'
  return (
    <div className="App">
      <Son msg={msg} msg2={msg2}></Son>
    </div>
  );
}

export default App;

1、props能传递任意数据包括JSX

2、props为只读数据需要父组件进行修改

3、children 特殊的props

直接在子组件标签内的数据为children属性

javascript 复制代码

 <Son msg={msg} msg2={msg2}>
        <span>props的children属性</span>
 </Son>


function Son(props){
  console.log(props);
  
  return(
    <div>这是子组件  {props.msg}
    <div>{props.children}</div>
    </div>
    
  )
}

子传父

子组件中调用父组件函数进行传值

子组件的点击事件调用父组件的函数进行修改

需要再父组件中存在这个定义方法，在子组件中传入，使用点击事件调用应该是4321顺序

兄弟通信二合一

就是A组件传值给父组件父组件传值给B组件

javascript 复制代码

import { useState } from "react";

// 父传子
function A({ sendMsg }) {
  const msg = "A组件的msg";
  return (
    <div>
      这是子组件A
      <button onClick={() => sendMsg(msg)}>传值</button>
    </div>
  );
}
function B(props) {
  return <div>这是子组件B {props.Amsg}</div>;
}

function App() {
  const [Amsg, setAmsg] = useState("");
  const sendMsg = (msg) => {
    console.log(msg);
    setAmsg(msg);
  };
  return (
    <div className="App">
      <A sendMsg={sendMsg}></A>
      <B Amsg={Amsg}></B>
    </div>
  );
}

跨组件通信

App组件传值给A组件里的B组件

1、使用createContext创建一个上下文对象

2、在顶层组件A中通过Ctx.Provider提供数据

3、在底层组件B中通过useContext钩子函数获取数据

javascript 复制代码

import { createContext, useContext, useState } from "react";
const MsgContext=createContext()

function C(){
  return(
    <div>这是C组件
      <D></D>
    </div>
  )
}
function D(){
 const Dmsg= useContext(MsgContext)
  return(
    <div>这是D组件 {Dmsg}
    </div>
  )
}

function App() {
  const appMsg='这是app的数据'
  
  return (
    <div className="App">
     
      <MsgContext value={appMsg}>
      <C></C>
      </MsgContext>
    </div>
  );
}

export default App;