React分为两种组件，函数组件与类组件，不同的组件，其通信方式也不同。

类组件

类组件的父子间通信主要通过props来进行

import React from "react"
import ReactDOM from 'react-dom'

class Parent extends React.Component {
  render() {
    return (
      <>
        <div>这是父组件</div>
        <div>
          这是子组件
          <Child arg='这是父组件传入的参数'/>
          //向子组件中传值
        </div>
      </>
    )
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <div>我是子组件</div>
        <div>这是从父组件接受到的props {this.props.arg}</div>
        //从this.props中取值
      </>
    )
  }
}

ReactDOM.render(<Parent/>, document.querySelector('#root'))

类组件中，通过this.props来进行父子之间的通信。

函数组件

函数组件的父子通信和类组件类似，但是函数组件不需要this

import React from "react"
import ReactDOM from 'react-dom'

const Parent = () => {
  return (
    <>
      <div>这是父组件</div>
      <div>
        这是子组件
        <Child arg='这是父组件传入的参数'/>
      </div>
    </>
  )
}

const Child = (props) => {
  return (
    <>
      <div>我是子组件</div>
      <div>这是从父组件接受到的props {props.arg}</div>
    </>
  )
}

ReactDOM.render(<Parent/>, document.querySelector('#root'))

函数组件除了使用props进行父子组件通信外，也可以使用hook ===> React.createContent() 来创建一个作用域，实现父子组件或更深的组件之间的通信

React 父子间通信

类组件

函数组件