【React】类组件传值（props）

父传值给子

父组件将自己的状态传递给子组件，子组件当做属性来接收props，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变

import React, { Component } from "react";
// 父组件
class Farther extends Component {
    // 父的数据
    state = {
        msg:"父的数据"
    }
    render() {
        return (
            <div>
            	// 父组件将自己的状态传递给子组件
                <Son  fun={this.returnMsgToChild.bind(this)}></Son>
            </div>
        );
    }
    // 将数据准备好，等子来要
    returnMsgToChild(){
        return this.state.msg;
    }
}
// 子组件
class Son extends Component {
    render() {
        return (<>
            <div>我是子组件</div>
            // 子组件当做属性来接收props
            <button onClick={this.giveMeMsg.bind(this)}>按钮</button>
        </>);
    }

    // 向父组件要数据
    giveMeMsg(){
        // 执行父给的方法
        console.log("子向父要的是：",this.props.fun());
    }
}

export default Farther;

---

子传值给父

通过属性传递方法，方法依旧需要子去执行，但是子需要将自己的数据传递给该方法，由父接收并且可以打印输出

import React, { Component} from "react";
// 父组件

class Farther extends Component {
    render() {
        return (
            <div>
                <Son fun={this.SonSetMsg.bind(this)}></Son>
            </div>
        );
    }
    // 父亲准备一个篮子，空的，需要子往里放东西
    SonSetMsg(msg) {
        console.log(msg);
    }
}
// 子组件
class Son extends Component {
    // 子的数据
    state = {
        msg:"子的数据"
    }
    render() {
        return (
            <div>
                这是子组件
                <button onClick={this.setMsg.bind(this)}>子把数据放篮子里</button>
            </div>
        );
    }
    // 子存放数据
    setMsg() {
        this.props.fun(this.state.msg);
    }
}

export default Farther;