04react18-基础篇-组件通信

父传子

实现步骤

1. 父组件传递数据 - 在子组件标签上绑定属性
2. 子组件接收数据 - 子组件通过props参数接收数据

// 父传子
// 1. 父组件传递数据  子组件标签身上绑定属性
// 2. 子组件接收数据  props的参数

function Son (props) {
  // props：对象里面包含了父组件传递过来的所有的数据
  // { name:'父组件中的数据'}
  console.log(props)
  return (
    <div>
      <h2>子组件接收的数据父组件:</h2>
      <div>我也姓:{props.xingshi}</div>
    </div>
  )
}
function App () {
  const xingshi = 'zhang'
  return (
    <div>
      <h1>父组件的数据:</h1>
      <div>我姓:{xingshi}</div>
      <Son xingshi={xingshi}/>
    </div>
  )
}

export default App

image.png

props说明

props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX

function Son (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={18}
        isTrue={false}
        list={['vue', 'react']}
        obj={{ name: 'jack' }}
        cb={() => console.log(123)}
        child={<span>this is span</span>}
      />
    </div>
  )
}
export default App

image.png
props是只读对象
子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改

特殊的prop-chilren

场景：当我们把内容嵌套在组件的标签内部时，组件会自动在名为children的prop属性中接收该内容

image.png

审查元素查看

image.png

子传父

image.png

核心思路：在子组件中调用父组件中的函数并传递参数

import { useState } from "react"
function Son ({ onGetSonMsg }) {
  // Son组件中的数据
  const sonMsg = '来自子组件的数据'
  return (
    <div>
      这是子组件
      <button onClick={() => onGetSonMsg(sonMsg)}>获取子组件的数据</button>
    </div>
  )
}

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

兄弟组件通信

image.png
实现思路: 借助 状态提升 机制，通过共同的父组件进行兄弟之间的数据传递

1. A组件先通过子传父的方式把数据传递给父组件App
2. App拿到数据之后通过父传子的方式再传递给B组件

// 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) => {
    console.log(name)
    setName(name)
  }
  return (
    <div>
      this is App
      <A onGetAName={getAName} />
      <B name={name} />
    </div>
  )
}

export default App

image.png

跨层组件通信

09.png
实现步骤：

1. 使用 createContext方法创建一个上下文对象Ctx
2. 在顶层组件（App）中通过 Ctx.Provider 组件提供数据
3. 在底层组件（B）中通过 useContext 钩子函数获取消费数据

// App -> A -> B

import { createContext, useContext } from "react"

// 1. createContext方法创建一个上下文对象

const MsgContext = createContext()

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

// 3. 在底层组件 通过useContext钩子函数使用数据

function A () {
  return (
    <div>
     这个是组件A
      <B />
    </div>
  )
}

function B () {
  const msg = useContext(MsgContext)
  return (
    <div>
       <div>这个是组件B:</div>
       <div>{msg}</div>
    </div>
  )
}

function App () {
  const msg = '顶级组件传递数据给B组件'
  return (
    <div>
      <MsgContext.Provider value={msg}>
        这个是顶级组件 App
        <A />
      </MsgContext.Provider>
    </div>
  )
}

export default App

image.png