react父子组件信息的传递

1. 父组件通过添加属性的方式把方法或者变量传递给子组件

import React, { Component } from 'react';
import Header from "./Header"//子组件Header
class ToDoList extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:"给你发送一条消息收到回复"
         };
    }
    onSendMsg=()=>{
        alert("圣旨到");
    }
    onReceiveMsg=(num)=>{
        this.setState({
            msg:num
        })
    }
    render() {
        return (
            <div>
                <Header params={this.state.msg} onSend={this.onSendMsg} parent={this}/>//通过parent属性吧父组件的this全部传递给子组件Header
            </div>
        );
    }
}

export default ToDoList;

2.子组件接收父组件的方法，通过this.props对象即可

如：this.props.params   this.props.onSend   this.props.parent.方法/属性

import React, { Component } from 'react';
class Header extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
                <p onClick={this.props.onSend}>接收上级的指示：{this.props.params}</p>
　　　　　　　　　　　　{/*调用父组件的方法传递参数，需要绑定this，然后添加传递的值，不然报错*/}
                <p onClick={this.props.parent.onReceiveMsg.bind(this,"123")}>回复上级指示：{this.props.params}</p>
        );
    }
}

export default Header;