目錄

一 組件通訊介紹

二 函數組件通訊

三 類組件通訊??

一 組件通訊介紹

組件是獨立且封閉的單元,默認情況下,只能使用組件自己的數據.
為了實現多個組件之間共享數據,就需要打破組件的獨立封閉性,讓組件與外界溝通,這個過程就是組件通訊.
組件是封閉的,要接收外部數據通過props來實現.

二 函數組件通訊

使用步驟
1 傳遞數據:給組件標簽添加屬性
2 接收數據:通過props接收數據

說明:<Hello>組件有2個屬性 name和age ,這兩個屬性會組成一個對象props來進行傳遞

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

//2 接收數據
//props是一個對象
const Hello = props => {
    console.log(props)
    return (
        <div>
            <h1>name:{props.name}</h1>
            <h1>age:{props.age}</h1>
        </div>
    )
}

//1 傳遞數據
ReactDOM.render(<Hello name='妹妹' age='3'/>, document.getElementById("root"));

備注:可以把參數的名字修改成props以外的名字

效果

控制臺

三 類組件通訊??

使用步驟
1 傳遞數據:給組件標簽添加屬性
2 接收數據:通過this.props接收數據

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

class Hello extends React.Component{
    render(){
        return (
            <div>
                {/*2 接收數據*/}
                <h1>name:{this.props.name}</h1>
                <h1>age:{this.props.age}</h1>
            </div>
        )
    }
}


//1 傳遞數據
ReactDOM.render(<Hello name='妹妹' age='3'/>, document.getElementById("root"));

備注:this.props 不能改變名字

效果

?? ?