父子通信

父传子

1. 父组件传递数据-在子组件标签上绑定属性

const name = 'app name'
  return (
    <div className="App">
      <Son name={name}></Son>
    </div>
  );

2. 子组件接收数据-子组件通过props参数接收数据

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

• props可传递任意数据（数字、字符串、布尔值、数组、对象、函数、JSX）

<Son 
      name={name}
      age={30}
      isTrue={false}
      classes={['music','math']}
      obj={{sex:'女'}}
      grade={()=>console.log(100)}
      child={<span>child</span>} >
</Son>

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

3. children

<Son>
      <p>一个p标签</p>
</Son>

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

子传父

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

// 父组件
  const getMsg = (msg)=>{
    console.log(msg)
  }
  return (
    <div className="App">
      <Son onGetSonMsg={getMsg}/>
    </div>
  );

// 子组件
function Son(props){
  return <h1 onClick={()=>props.onGetSonMsg('传给父级')}>向父组件传递数据</h1>
}

兄弟通信

使用状态提升实现兄弟组件通信
实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递。

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

// 父组件
const [Amsg,setAmsg] = useState('')
  const getMsg = (msg)=>{
    setAmsg(msg)
  }
  return (
    <div className="App">
      <SonA onGetSonMsg={getMsg}/>
      <SonB msg = {Amsg}/>
    </div>
  );
// A组件
function SonA(props){
  return <h1 onClick={()=>props.onGetSonMsg('我来自SonA')}>向SonB传递数据</h1>
}
// B组件
function SonB({msg}){
  return <p>SonA传来的信息：{msg}</p>
}

image.png

跨层通信

image.png

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

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

import { createContext, useContext } from 'react'
const MsgContext = createContext()

function A() {
  return <div>
    <p>A组件</p>
    <B />
  </div>
}

function B() {
  const msg = useContext(MsgContext)
  return <p>B组件获取到的信息：{msg}</p>
}
function App() {
  const msg = '顶级组件的信息'
  return (
    <div className="App">
      this is App
      <MsgContext.Provider value={msg}>
        <A></A>
      </MsgContext.Provider>
    </div>
  );
}

export default App;

image.png