React(5)

组件通信

父子通信

父传子

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;
相关推荐
龙在天4 分钟前
vue3如何封装统一的弹窗
前端
一枚前端小能手8 分钟前
🚀 应用出了问题你都不知道,别着急我来帮你
前端·监控
yvvvy20 分钟前
前端性能优化全家桶:从重绘重排到面试连招,一篇搞懂
前端·javascript·面试
1024小神23 分钟前
微信小程序原生wxml中的事件函数
前端
BigTopOne36 分钟前
[kotlin] inline 函数
前端
怪可爱的地球人37 分钟前
typescript-接口
前端
我是ed39 分钟前
# vue实现拖拉拽效果,类似于禅道首页可拖拽排布展示内容(插件-Grid Layout)
前端
东风西巷43 分钟前
微软恶意软件删除工具:官方免费的系统安全防护利器
前端·安全·microsoft·系统安全·软件需求
跟橙姐学代码1 小时前
手把手教你玩转 multiprocessing,让程序跑得飞起
前端·python·ipython
华仔啊1 小时前
SpringBoot+MySQL+Vue实现文件共享系统
java·前端·后端