目錄

一 組件通訊介紹

二 函數(shù)組件通訊

三 類組件通訊??

一 組件通訊介紹

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

二 函數(shù)組件通訊

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

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

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

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

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

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

效果

控制臺

三 類組件通訊??

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

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

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


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

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

效果

?? ?