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;
相关推荐
前端小趴菜0528 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子5 小时前
React状态管理最佳实践
前端
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts