React没有双向通讯那末自在，而是单向的，即从父组件到子组件。

• 父组件->子组件：props
• 子组件->父组件：callback
• 子组件->子组件：子组件经由过程回调转变父组件中的状况，经由过程props再修正另一个组件的状况

父子组件间通讯

var CalendarControl = React.createClass({
    getDefaultProps: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, 'yyyy'),
            month: parseInt(util.formatDate(newDate, 'MM')),
            day: parseInt(util.formatDate(newDate, 'dd'))
        };
    },
    render: function () {
        return (
            <div>
                <CalendarHeader year="this.props.year" month="this.props.month" day="this.props.day"/>
            </div>
        )
    }
});

子父组件间通讯

var CalendarControl = React.createClass({
    getInitialState: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, 'yyyy'),
            month: parseInt(util.formatDate(newDate, 'MM')),
            day: parseInt(util.formatDate(newDate, 'dd'))
        };
    },
    //给子组件一个回调函数，用来更新父组件的状况，然后影响另一个组件
    handleFilterUpdate: function (filterYear, filterMonth) {
        this.setState({
            year: filterYear,
            month: filterMonth
        });
    },
    render: function () {
        return (
            <div>
                <CalendarHeader updateFilter={this.handleFilterUpdate}/>
            </div>
        )
    }
});

var CalendarHeader = React.createClass({
    getInitialState: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, 'yyyy'),//设置默许年为本年
            month: parseInt(util.formatDate(newDate, 'MM'))//设置默许日为本日
        };
    },
    handleLeftClick: function () {
        var newMonth = parseInt(this.state.month) - 1;
        var year = this.state.year;
        if (newMonth < 1) {
            year--;
            newMonth = 12;
        }
        this.state.month = newMonth;
        this.state.year = year;
        this.setState(this.state);//在设置了state以后须要挪用setState要领来修正状况值，
        //每次修正以后都邑自动挪用this.render要领，再次衬着组件
        this.props.updateFilter(year, newMonth);
    },
    handleRightClick: function () {
        var newMonth = parseInt(this.state.month) + 1;
        var year = this.state.year;
        if (newMonth > 12) {
            year++;
            newMonth = 1;
        }
        this.state.month = newMonth;
        this.state.year = year;
        this.setState(this.state);//在设置了state以后须要挪用setState要领来修正状况值，
        //每次修正以后都邑自动挪用this.render要领，再次衬着组件，以此向父组件通讯
        this.props.updateFilter(year,newMonth);
    },

    render: function () {
        return (
            <div className="headerborder">
                <p>{this.state.month}月</p>
                <p>{this.state.year}年</p>
                <p className="triangle-left" onClick={this.handleLeftClick}> </p>
                <p className="triangle-right" onClick={this.handleRightClick}> </p>
            </div>
        )
    }
});

兄弟组件间通讯

var CalendarControl = React.createClass({
    getInitialState: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, 'yyyy'),
            month: parseInt(util.formatDate(newDate, 'MM')),
            day: parseInt(util.formatDate(newDate, 'dd'))
        };
    },
    //给子组件一个回调函数，用来更新父组件的状况，然后影响另一个组件
    handleFilterUpdate: function (filterYear, filterMonth) {
        this.setState({
            year: filterYear,
            month: filterMonth
        });//革新父组件状况
    },
    render: function () {
        return (
            <div>
                <CalendarHeader updateFilter={this.handleFilterUpdate}/>
                <CalendarBody
                    year={this.state.year}
                    month={this.state.month}
                    day={this.state.day}
                />//父组件状况被另一个子组件革新后，这个子组件就会被革新
            </div>
        )
    }
});