React--组件通信

阿萨德阿是

相当于vue里面的插槽

复制代码
// 组件通信(自定义的组件首字母必须大写)
// 父传子
// 1.父组件传递数据,子组件标签身上绑定数据
// 2.子组件接收数据,props的参数(props参数名可以随便填,但是一般就是这个名称就行)


function Son11(props){
  // props : 象里面包含了父组件传递过来的所有的数据
  console.log('props',props)
  return (
    <div>这是新的数据----{props.nameData}------------{props.zsxm}--------
    <br/>
    age=={props.age}
    <br/>
    isTrue=={props.isTrue}
    <br/>
    list=={props.list}
    <br/>
    functios=={props.functios}
    <br/>
    jsxx=={props.jsxx}
    <br/>
    使用props的children属性
    children=={props.children}

    </div>
  )
}

function App() {
  const nameData="这是动态传入的数据"
  const zsxm="真是姓名"

  return (
    <div className="App">
      <Son11  
      nameData={nameData} 
      zsxm={zsxm}
      age={18}
      isTrue={false}
      list={['vue','jack']}
      functios={()=>console.log('打印')}
      jsxx={<span>你好我是jsx,传递过来的</span>}
      >
        
        
        <span>相当于vue里面的插槽,看看子组件打印的props,多出来一个children属性,就是这个</span>
        
        
        
        </Son11>  
    </div>
  );
}
export default App;

子传父组件(并且渲染到界面上)

复制代码
// 组件通信  子传父

import {useState} from 'react'

function Son11({onGetMsg}) {//小括号里叫解构赋值
  const msg="我在子组件里面"
  return <div>
    
    <button onClick={()=>onGetMsg(msg)}>子组件的按钮</button>
  </div>;
}
function App() {

  // 声明状态数据
  const [msgs,setMsg] =useState('');

  const getMsg=(msg)=>{
    console.log("子传递来的值",msg);
    setMsg(msg);
  }

  return (
    <div className="App">
      这是子组件传来的----{msgs}
      <Son11 onGetMsg={getMsg}></Son11>
    </div>
  );
}
export default App;

兄弟组件之间传递(通过状态提升之间通信)

复制代码
// 组件通信  兄弟间传递
import {useState} from 'react'

function A({toApp}) {//小括号里叫解构赋值
  const aValue="我是A的变量"
  return <div>
    组件A<button onClick={()=>toApp(aValue)}>A组件的按钮</button>
  </div>;
}

function B(props) {//小括号里叫解构赋值
  return <div>
    组件B---{props.aValue}
  </div>;
}
function App() {
  const [aValue,setAValue]=useState("");
  const toApp=(aValue)=>{
    console.log("A的子传父",aValue);
    setAValue(aValue);
  }
  return (
    <div className="App">
        <A toApp={toApp}></A>
        <B aValue={aValue}></B>
    </div>
  );
}
export default App;

使用context跨层传递数据

复制代码
// 组件通信  context 传递   爷孙  只要行程顶层底层关系就行
import {useContext, useState} from 'react'
import { createContext } from 'react';
// 1.使用createContext方法创建上下文对象
const MsgContext=createContext();
// 2.在顶层组件(提供数据方,这个案例就是APP),通过Provider组件提供数据

// 3.在底层组件通过useContext钩子函数使用数据
function A({}) {//小括号里叫解构赋值
  const aValue="我是A的变量"
  return <div>
    组件A
    <B></B>

  </div>;
}

function B() {//小括号里叫解构赋值
  const mshg=useContext(MsgContext);
  return <div>
    组件B获取的顶层变量---{mshg.msg}   ----{mshg.ma}  
  </div>;
}
function App() {
  const msg="我是顶层APP的变量";
  const ma="asdasdas"
  const qpp={'msg':msg,'ma':ma}
  return (
    <div className="App">
        <MsgContext.Provider value={qpp} >
          <A></A>
        </MsgContext.Provider>
    </div>
  );
}
export default App;
相关推荐
慧一居士34 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead36 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码8 小时前
1.
react.js·node.js·angular.js