React - 组件间通信

1. 概念

组件之间的数据传递

2. 父传子

（1）实现步骤：

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

function Son(props) {
  return <div>{props.name}</div>
}

function App() {
  const name = '孙笑川'
  return (
    <div className="App">
      <Son name={name} />
    </div>
  )
}

export default App

（2）props 说明

• props 可传递任意类型的数据

  数字、字符串、布尔值、数组、对象、函数、JSX

• props 是只读对象

  子组件只能读取 props 中的数据，不能直接修改（即父组件的数据只能由父组件修改）

3. props children

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

function Son(props) {
  console.log(props)
  return <div>Son Compent, {props.children}</div>
}

function App() {
  return (
    <div className="App">
      <Son>
        <span>Nested content</span>
      </Son>
    </div>
  )
}

export default App

4. 子传父

在子组件中调用父组件中的函数并传递参数

import { useState } from 'react'

function Son({ getMsg }) {
  const data = '孙笑川'
  return (
    <div>
      Son Compent
      <button onClick={() => getMsg(data)}>点一下</button>
    </div>
  )
}

function App() {
  const [msg, setMsg] = useState('')
  const getMsg = (msg) => {
    setMsg(msg)
    console.log('son compent transmit data:', msg)
  }
  return (
    <div className="App">
      This is React Demo, {msg}
      <Son getMsg={getMsg} />
    </div>
  )
}

export default App

5. 兄弟组件通信

借助“状态提示”机制，通过父组件进行兄弟组件间的数据传递

1. A 组件子传父
2. 父组件父传子给 B 组件

import { useState } from 'react'

function A({ getAData }) {
  const data = 'a compent data'
  return (
    <div>
      <p>Son A Compent</p>
      <button onClick={() => getAData(data)}>A Compent</button>
    </div>
  )
}

function B(props) {
  return <p>Son B Compent, {props.data}</p>
}

function App() {
  const [data, setData] = useState('')
  const getAData = (data) => {
    setData(data)
    console.log(data)
  }
  return (
    <div className="App">
      <A getAData={getAData} />
      <B data={data} />
    </div>
  )
}

export default App

6. 使用 Context 机制跨层级组件通信

实现步骤：

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

import { createContext, useContext } from 'react'

const Ctx = createContext()

function A() {
  return (
    <div>
      <p>Son A Compent</p>
    </div>
  )
}

function B() {
  const data = useContext(Ctx)
  return <p>Son B Compent, {data}</p>
}

function App() {
  const data = 'App data'
  return (
    <div className="App">
      <Ctx value={data}>
        this is App
        <A />
        <B />
      </Ctx>
    </div>
  )
}

export default App