React-组件通信

1、父子组件通信

(1)父传子(props 传值)

javascript 复制代码
// 父组件
function App() {
  const name = '张三'
  return (
    <div className="App">
      <Son name={name} />
    </div>
  );
}
 
// 子组件
function Son(props) {
  return (
    <div>{ props.name }</div>
  )
}

(2)子传父(回调函数)

javascript 复制代码
// 父组件
function App() {
  const [msg, setMsg] = useState('');
  const getMsg = (data) => {
    console.log(data)
    setMsg(data)
  }
  return (
    <div className="App">
      <div>{ msg }</div>
      <Son onGetMsg={getMsg} />
    </div>
  );
}
 
// 子组件
function Son({ onGetMsg }) {
  return (
    <div>
      <button onClick={() => onGetMsg('子组件给父组件的数据')}>发送数据</button>
    </div>
  )
}

(3)双向数据绑定

javascript 复制代码
// 父组件
function App() {
  const [msg, setMsg] = useState('');
  const getMsg = (data) => {
    console.log(data);
    setMsg(data)
  }
  return (
    <div className="App">
      <div>{ msg }</div>
      <Son msg={msg} onGetMsg={getMsg} />
    </div>
  );
}
 
// 子组件
function Son({ msg, onGetMsg }) {
  return (
    <div>
      <input type="text" value={msg} onChange={(e) => onGetMsg(e.target.value)} />
    </div>
  )
}

2、兄弟组件通信

通过状态提升实现兄弟组件之间传值,子传父 => 父传子

javascript 复制代码
// 父组件
function App() {
  const [msg, setMsg] = useState('');
  const getMsg = (data) => {
    setMsg(data)
  }
  return (
    <div className="App">
      this is App
      <A onGetMsg={getMsg} />
      <B msg={msg} />
    </div>
  );
}

// 子组件A
function A({ onGetMsg }) {
  return (
    <div>
      this is A component
      <button onClick={() => onGetMsg('AAA')}>send</button>
    </div>
  )
}

// 子组件B
function B(props) {
  return (
    <div>
      this is B component
      { props.msg }
    </div>
  )
}

3、跨层级组件通信

  1. 使用createContext创建上下文对象
  2. 在顶层组件(App)中使用Ctx.Provider组件提供数据
  3. 在底层组件(B)中通过useContext获取消费数据
javascript 复制代码
import { createContext, useContext } from 'react';

// 1.使用createContext创建上下文对象
const MsgContent = createContext();

// 父组件
function App() {
  const msg = '哈哈哈';
  return (
    <div className="App">
      {/* 2.在顶层组件(App)中使用Ctx.Provider组件提供数据 */}
      <MsgContent.Provider value={msg}>
        this is App
        <A />
      </MsgContent.Provider>
    </div>
  );
}

// 子组件A
function A() {
  return (
    <div>
      this is A component
      <B />
    </div>
  )
}

// 孙子组件B
function B() {
  // 3.在底层组件(B)中通过useContext获取消费数据
  const msg = useContext(MsgContent);
  return (
    <div>
      this is B component
      {msg}
    </div>
  )
}

4、任意组件通信(Redux/Zustand)

见后续文章

相关推荐
半点寒12W14 分钟前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端1 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~1 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程1 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏1 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头3 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's3 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫3 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron