## 组件间的通信
### 父传子
#### 1、使用props语法
调用子组件时加入传输数据，编码子组件过程中进行引用



子组件引用
    


```
          <Son name={name}
          age={19}
          child={<span>this is span</span>}>
          </Son>
```
子组件编码
    
```
function Son(props){
  console.log(props)
  return <div>这是{props.name}，年龄{props.age}</div>
}
```
使用props只能传递数据，子组件不能修改props传过来的数据。
#### 2、默认传值
父组件引用子组件过程中，在闭合子组件标签内书写react表达式可实现默认传值

```js
// 子组件
function Son(props){
  console.log(props)
  return <div>{props.children}</div>
}
function App() {
  return (
    <div>
     <Son
     >
         {/*HTML标签*/}
         <span>this is span </span>
     </Son>
    </div>
  )
}
```
运行截图:

![image.png](/static/img/dacfd6b19556d733d2eab1411789bb99.image.webp)

### 子传父
把子组件的数据传递给父组件，在子组件中调用父组件中的函数并传递参数

```js
// 子组件
function Son({onGetMsg}){
    const sonMsg = 'this is son msg'
  return <div>
    <button onClick={() => onGetMsg(sonMsg)}> test</button>
    </div>
}
function App() {
    //状态管理驱动视图变化
    const [msg, setMsg] = useState('')
    const getMsg =(msg)=>{
        console.log(msg)
        setMsg(msg)
    }
  return (
    <div>{msg}
        //调用
     <Son onGetMsg={getMsg}></Son>
    </div>
  )
}
```
### 兄弟组件间的通信

兄弟组件就是有相同的父组件的组件，此类组件间的数据传输可以通过其中某个组件将数据传到父组件，再通过父组件传到其它组件上

### 使用context机制实现夸层间组件通信
1、通过createContext创建上下文对象
2、在顶层组件中利用provider引入
3、在底层组件中通useContext引入
组件之间的层级是相对的，利用provider引入数据必须包含次层级组件

```js
// 1、createContext方法创建上下文对象
const MsgContext = createContext();
//子组件B
function B(){
    // 3、将MsgContext对象传入
    const msg = useContext(MsgContext)
    return <div>this is B component, {msg}</div>
}
// 子组件A
function A(){
  return <div>this is A component<B/></div>
}
function App() {
    const msg = 'this is app msg'
  return (
    <div>
        this is app
        {/*2、在顶层组件通过provider组件提供数据*/}
     <MsgContext.Provider value={msg}>
        <A/>
     </MsgContext.Provider>
    </div>
  )
}
```
运行截图

![image.png](/static/img/b6f98e88b9427b821abe9405f7698c80.image.webp)

react