React 中組件間通訊的幾種方式_react

在使用 React 的過程中，不可避免的需要組件間進行訊息傳遞（通訊），組件間通訊大體有下面幾種情況：

1 父組件向子組件通訊
2 子組件向父組件通訊

父組件向子組件通訊
這是最簡單也是最常用的一種通訊方式：父組件通過向子組件傳遞 props，子組件得到 props 後進行相應的處理。
下面是示範代碼：

父組件 App.js：

import React,{ Component } from "react";import Sub from "./SubComponent.js";import "./App.css";export default class App extends Component{    render(){        return(            <div>                <Sub title = "今年過節不收禮" />            </div>        )    }}

子組件 SubComponent.js：

import React from "react";const Sub = (props) => {    return(        <h1>            { props.title }        </h1>    )}export default Sub;

子組件向父組件通訊
利用回呼函數，可以實現子組件向父組件通訊：父組件將一個函數作為 props 傳遞給子組件，子組件調用該回呼函數，便可以向父組件通訊。
下面是示範代碼：

SubComponent.js：

import React from "react";const Sub = (props) => {    const cb = (msg) => {        return () => {            props.callback(msg)        }    }    return(        <div>            <button onClick = { cb("我們通訊把") }>點擊我</button>        </div>    )}export default Sub;

App.js：

import React,{ Component } from "react";import Sub from "./SubComponent.js";import "./App.css";export default class App extends Component{    callback(msg){        console.log(msg);    }    render(){        return(            <div>                <Sub callback = { this.callback.bind(this) } />            </div>        )    }}

目前只用到了這兩種，後續用到新的再來更新