React 组件间的通信

React

父传子

实现:

javascript 复制代码
function Son(props){
  return <div>{ props.name }</div>
}
​
​
function App(){
  const name = 'this is app name'
  return (
    <div>
       <Son name={name}/>
    </div>
  )
}

注意:这里可以传递任何类型,包括函数,span盒子等等

特殊:当我们将内容嵌套在子盒子内部时,在子组件里面可以通过props.childern既可以调用数据

如使用时:

javascript 复制代码
<Son name={name}>
    <span>hdfus</span>
</Son>

子传父

子组件调用父组件里面的函数

javascript 复制代码
function Son({ onGetMsg }){
  const sonMsg = 'this is son msg'
  return (
    <div>
      {/* 在子组件中执行父组件传递过来的函数 */}
      <button onClick={()=>onGetMsg(sonMsg)}>send</button>
    </div>
  )
}
或者:
const Son=({ onGetMsg })=>{
      const sonMsg = 'this is son msg'
  return (
    <div>
      {/* 在子组件中执行父组件传递过来的函数 */}
      <button onClick={()=>onGetMsg(sonMsg)}>send</button>
    </div>
  )
    
}
​
function App(){
  const getMsg = (msg)=>console.log(msg)
  
  return (
    <div>
      {/* 传递父组件中的函数到子组件 */}
       <Son onGetMsg={ getMsg }/>
    </div>
  )
}

兄弟间通信(状态通信)

a传父组件,父组件传b

javascript 复制代码
// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B
​
import { useState } from "react"
​
function A ({ onGetAName }) {
  // Son组件中的数据
  const name = 'this is A name'
  return (
    <div>
      this is A compnent,
      <button onClick={() => onGetAName(name)}>send</button>
    </div>
  )
}
​
function B ({ name }) {
  return (
    <div>
      this is B compnent,
      {name}
    </div>
  )
}
​
function App () {
  const [name, setName] = useState('')
  const getAName = (name) => {
    setName(name)
  }
  return (
    <div>
      this is App
      <A onGetAName={getAName} />
      <B name={name} />
    </div>
  )
}
​
export default App

跨层通信

实现步骤:

  1. 使用 createContext方法创建一个上下文对象Ctx

  2. 在顶层组件(App)中通过 Ctx.Provider 组件提供数据

  3. 在底层组件(B)中通过 useContext 钩子函数获取消费数据

javascript 复制代码
// App -> A -> B
​
import { createContext, useContext } from "react"
​
// 1. createContext方法创建一个上下文对象
​
const MsgContext = createContext()
​
function A () {
  return (
    <div>
      this is A component
      <B />
    </div>
  )
}
​
function B () {
  // 3. 在底层组件 通过useContext钩子函数使用数据
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B compnent,{msg}
    </div>
  )
}
​
function App () {
  const msg = 'this is app msg'
  return (
    <div>
      {/* 2. 在顶层组件 通过Provider组件提供数据 */}
      <MsgContext.Provider value={msg}>
        this is App
        <A />
      </MsgContext.Provider>
    </div>
  )
}
​
export default App
相关推荐
疯狂的沙粒10 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
siwangqishiq214 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli16 分钟前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i16 分钟前
HTML5 拖放 API
前端·html
xiaominlaopodaren30 分钟前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX32 分钟前
一句话解释JS链式调用
前端·javascript
1024小神33 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano38 分钟前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕43 分钟前
如何将异步操作封装为Promise
前端·javascript
小小小小宇43 分钟前
前端定高和不定高虚拟列表
前端