React 组件之间通讯

组件通信就是组件之间的数据传递，根据不同的层级关系，有不同的通讯方式

一、父传子

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

子组件接受数据-子组件通过props参数接收数据，props可传递任意的数据，包括数字、字符串、布尔值、数组、对象、函数、JSX

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

function Son (props){
  //props：是一个对象，里面包含了父组件传递过来的所有数据
  let {name,text} = props
  return (
    <div>我是子组件{text}---{name}</div>
  )
}

function App(){
  const text = '这是要传递给子组件的数据'
  const name = '父组件'
  return (
    <div>
      <div>我是父组件</div>
      <Son text={text} name={name}/>
    </div>
  )
}
export default App

特殊的prop children

当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容,例如下面的例子，prop的children 会获取到this.is a span

<Son>
 <span>this.is a span</span>
</Son>

二、子传父

在子组件中调用父组件的函数，并传递参数，注意写在子组件中间的代码结构不生效，若想生效，可通过prop children 显示在子组件中

function Son ({onReciveChildren}){
  const text ='测试子穿父'
  return (
    <div onClick={()=>onReciveChildren(text)}>我是子组件</div>
  )
}

function App(){
  //接收子组件数据的方法
  let reciveChildren = (data)=>{
    console.log(data)
  }
  return (
    <div>
      <Son onReciveChildren = {reciveChildren}></Son>
    </div>
  )
}
export default App

三、兄弟之间的组件通信

可以使用状态提升，通过父组件进行兄弟组件之间的数据传递；也可以使用content机制跨层组件通信。

使用createContext()方法创建一个上下文对象Ctx

在顶层组件（App)通过Ctx.Provider组件提供数据

在底层组件中通过useContent钩子函数获取数据

import { createContext } from 'react';
let mesContext = createContext()
function A (){
  return (
    <div>A
      <B></B>
    </div>
  )
}
function B(){
  let a = useContext(mesContext)
  return <div>B{a}</div>
}
function App(){
  let msg = '跨层传递的数据'
  return (
    <div>
      <mesContext.Provider value={msg}>
        App
        <A></A>
      </mesContext.Provider>
      
    </div>
  )
}
export default App