目錄

一?父組件 → 子組件

二 子組件 → 父組件

三 兄弟組件通訊

一?父組件 → 子組件

父組件傳遞數據給子組件

步驟

1 父組件提供要傳遞的數據,寫在state里
2 給子組件標簽添加屬性,值為state中的數據
3 子組件中通過props接收父組件傳遞的數據

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

//父組件
class Parent extends React.Component {

    //1 父組件提供要傳遞的數據,寫在state里
    state = {
        lastName: "洛"
    }

    render() {
        return (
            <h1>
                父組件:
                {/*2 給子組件標簽添加屬性,值為state中的數據*/}
                <Child name={this.state.lastName}></Child>
            </h1>
        )
    }
}

//子組件
class Child extends React.Component {
    render() {
        return (<p>
            子組件:
            {/*3 子組件中通過props接收父組件傳遞的數據*/}
            <span>{this.props.name}</span>
        </p>)
    }
}

// const Child = (props) => {
//     return (<p>
//         子組件:
//         {/*3 子組件中通過props接收父組件傳遞的數據*/}
//         <span>{props.name}</span>
//     </p>)
// }


//1 傳遞數據
ReactDOM.render(<Parent/>, document.getElementById("root"));

效果

?二 子組件 → 父組件

思路:利用回調函數,父組件提供回調,子組件調用,將要傳遞的數據作為回調函數的參數

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

//父組件
class Parent extends React.Component {

    state = {
        parentMsg: ''
    }

    //回調函數.用來接收數據
    //4 執行回調函數,在頁面alert
    getChildMsg = (data) => {
        alert("接收到子組件傳遞過來的數據:" + data)
        this.setState({
                parentMsg: data
            }
        )
    }

    render() {
        return (
            <h1>
                父組件:{this.state.parentMsg}
                {/*子組件的屬性是回調函數*/}
                {/*3 回調函數getMsg(msg) → getChildMsg(data)*/}
                <Child getMsg={this.getChildMsg}></Child>
            </h1>
        )
    }
}

//子組件
class Child extends React.Component {

    //組件要傳遞給父組件的數據
    state = {
        msg: "我的帥爸爸"
    }
    handleClick = () => {
        //2 子組件調用父組件中傳遞過來的回調函數getMsg(msg),回調函數的參數是 子組件要傳遞給父組件的數據
        this.props.getMsg(this.state.msg)
    }

    render() {
        return (<p>
            子組件:
            <div>
                {/*1 點擊按鈕,走handleClick函數*/}
                <button onClick={this.handleClick}>點我</button>
            </div>
        </p>)
    }
}

ReactDOM.render(<Parent/>, document.getElementById("root"));

效果

?

?總結:

點擊按鈕 → 執行handleClick函數 → 執行getMsg(msg)? 該參數msg就是子組件要傳遞給父組件的數據 →?getChildMsg(data) → alert

三 兄弟組件通訊

將共享狀態提示到最近的公共父組件中,由公共父組件來管理這個狀態
思想:狀態提升
公共父組件職責:
1 提供共享狀態
2 提供操作共享狀態的方法
?

代碼

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

//父組件
class Parent extends React.Component {

    //提供共享狀態
    state = {
        score: 0
    }

    //提供操作共享狀態的方法
    addScore = () => {
        this.setState({
            score:this.state.score+1
            }
        )
    }

    render() {
        return (
            <h1>
                <Child1 score={this.state.score}/>
                <Child2 addScore={this.addScore}/>
            </h1>
        )
    }
}

//子組件1
class Child1 extends React.Component {
    render() {
        return (<h1>分數:{this.props.score}</h1>)
    }
}

//子組件2
class Child2 extends React.Component {

    render() {
        return (<button onClick={this.props.addScore}>點我加分</button>)
    }
}

ReactDOM.render(<Parent/>, document.getElementById("root"));

效果

點擊按鈕, 增加分數