“React元件間通訊”學習筆記

Gideon發表於2016-06-03
React元件筆記

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

相關文章