react组件通讯的三种方式props:父组件和子组件互相通讯、兄弟组件通讯

目录

一 父组件 → 子组件

二 子组件 → 父组件

三 兄弟组件通讯

---

一 父组件 → 子组件

父组件传递数据给子组件

步骤

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"));

效果

点击按钮, 增加分数