学习React的组件通讯（Day：7）

[XJQ124]

任务：学习React的组件通讯

进度：已完成

---

这部分我是看的b站教程，大概分为四个部分 参考视频链接： https://www.bilibili.com/video/BV1ZB4y1Z7o8/?p=30&spm_id_from=333.880.my_history.page.click&vd_source=0c69fbba48c3d9261273e8ba6e1dd239

1、父传子

具体过程是父组件传数据，然后再在子组件中绑定 子组件接受数据，通过props接受

//父传子
//1、父组件传递属性  子组件标签身上绑定属性
//2、子组件接受数据   通过props参数接受
function Son(props){
  //props：是一个对象，里面包含了所有父组件传递过来的数据
  console.log(props)
  return <div>this is son{props.name},jsx:{props.child}</div>
}

function App(){
  const name = 'this is app name'
  return(
    <div>
      <Son 
      name = {name}
      age = {22}
      isTrue = {false}
      list = {['vue','react']}
      obj = {{name: 'steven'}}
      cb = {() => console.log(123)}
      child = {<span>this is span</span>}

      /> 
    </div>
  ) 
}
export default App
//上面15行的第一个name是属性名，可以随意取，第二个name才是内容

2、父传子中的嵌套标签

//标签套标签的例子
function Son(props){ 
  console.log(props)
  return <div>this is son{props.children}</div>
}
function App(){
  return(
    <div>
      <Son>
        <span>this is span</span>
      </Son>
    </div>
  )
}
export default App

当父组件中嵌套标签的时候，会自动生成一个chirdlen 这是一个自动的prop 可以直接在子组件中使用

3、子传父

import { useState } from "react"
//在子组件中调用父组件的函数，并且传递实参给父组件
function Son( {onGetSonMsg}){
  const sonMsg = 'this is sonMsg'
  return(
    <div>
      this is son
      <button onClick={()=>onGetSonMsg(sonMsg)}>sendMsg</button>
    </div>
  )

}

function App(){
  const [msg, setMsg] = useState('')
  const getMsg = (msg) => {
    console.log(msg)
    setMsg(msg)
  }
  return(
    <div>
      this is App,{msg}
      <Son onGetSonMsg = {getMsg}/>
    </div>
  )
}
export default App

核心就是在子组件中调用父组件的函数并传递参数

4、在兄弟组件之间通信，

//使用状态提升实现兄弟组件通信
//通过子传父， A->App
//然后父传子，APP->B
function A({onGetAName}){
  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 compent
      {name}
    </div>
  )
}

function App(){
  const [name,setName] = useState('')
  const getAName = (name)=>{
    console.log(name)
    setName(name)
  }
  return (
    <div>
      this is App 
      <A onGetAName={getAName}/>
      <B name={name}/>   
    </div>
  )
}
export default App

5、使用context机制跨层级实现组件通信（同一层级也是可以的）

import { createContext, useContext } from "react"
//1、createContext方法创建一个上下文对象
const MsgContext = createContext()

//2、在顶层组件 通过Provider组件提供数据

//3、在底层组件，通过useContext钩子函数使用数据
function A(){
  return (
    <div>
      this is A component
    <B />
    </div>
  )
}
function B(){
  const  msg = useContext(MsgContext)
  return (
    <div>
      this is B component,{msg}
    </div>
  )
}

function App(){ 
  const msg = 'this is app msg'
  return(
    <div>
      <MsgContext.Provider value={msg}>
        this is App
        <A />
      </MsgContext.Provider>
    </div>
  )
}
export default App

这里基本上就是React中的组件通讯的几种方式了