成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

“React組件間通信”學(xué)習(xí)筆記

darcrand / 499人閱讀

React沒(méi)有雙向通信那么自由，而是單向的，即從父組件到子組件。

父組件->子組件：props

子組件->父組件：callback

子組件->子組件：子組件通過(guò)回調(diào)改變父組件中的狀態(tài)，通過(guò)props再修改另一個(gè)組件的狀態(tài)

父子組件間通信 
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 (
            

                
            

        )
    }
});
子父組件間通信 
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"))
        };
    },
    //給子組件一個(gè)回調(diào)函數(shù)，用來(lái)更新父組件的狀態(tài)，然后影響另一個(gè)組件
    handleFilterUpdate: function (filterYear, filterMonth) {
        this.setState({
            year: filterYear,
            month: filterMonth
        });
    },
    render: function () {
        return (
            

                
            

        )
    }
});

var CalendarHeader = React.createClass({
    getInitialState: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, "yyyy"),//設(shè)置默認(rèn)年為今年
            month: parseInt(util.formatDate(newDate, "MM"))//設(shè)置默認(rèn)日為今天
        };
    },
    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);//在設(shè)置了state之后需要調(diào)用setState方法來(lái)修改狀態(tài)值，
        //每次修改之后都會(huì)自動(dòng)調(diào)用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);//在設(shè)置了state之后需要調(diào)用setState方法來(lái)修改狀態(tài)值，
        //每次修改之后都會(huì)自動(dòng)調(diào)用this.render方法，再次渲染組件，以此向父組件通信
        this.props.updateFilter(year,newMonth);
    },

    render: function () {
        return (
            

                
{this.state.month}月

                
{this.state.year}年

                
 

                
 

            

        )
    }
});
兄弟組件間通信 
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"))
        };
    },
    //給子組件一個(gè)回調(diào)函數(shù)，用來(lái)更新父組件的狀態(tài)，然后影響另一個(gè)組件
    handleFilterUpdate: function (filterYear, filterMonth) {
        this.setState({
            year: filterYear,
            month: filterMonth
        });//刷新父組件狀態(tài)
    },
    render: function () {
        return (
            

                
                //父組件狀態(tài)被另一個(gè)子組件刷新后，這個(gè)子組件就會(huì)被刷新
            

        )
    }
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86302.html

相關(guān)文章

  • 解密傳統(tǒng)組件間通信與React組件間通信

    摘要：同時(shí)吸取了社區(qū)大量?jī)?yōu)秀思想，進(jìn)行歸納比對(duì)。有興趣的讀者可以點(diǎn)擊下面的鏈接購(gòu)買(mǎi)，再次感謝各位的支持與鼓勵(lì)懇請(qǐng)各位批評(píng)指正京東當(dāng)當(dāng)原文網(wǎng)址 在React中最小的邏輯單元是組件，組件之間如果有耦合關(guān)系就會(huì)進(jìn)行通信，本文將會(huì)介紹React中的組件通信的不同方式 通過(guò)歸納范，可以將任意組件間的通信歸類(lèi)為四種類(lèi)型的組件間通信，分別是父子組件，爺孫組件，兄弟組件和任意組件，需要注意的是前三個(gè)也可以算...

    CoderBear 評(píng)論0 收藏0

  • React組件間通信

    摘要：組件間通信父組件中放入子組件將自身屬性與方法傳給子組件子組件即父組件的一部分所以只要父組件重新子組件也必定重新子組件接收父組件傳過(guò)來(lái)的屬性與方法調(diào)用父組件方法為父組件中的父組件子組件調(diào)用子組件自己的方法調(diào)用父組件方法父組件向子組件通信數(shù) 組件間通信 1.父組件中放入子組件,將自身屬性與方法傳給子組件,子組件即父組件的一部分,所以只要父組件重新render,子組件也必定重新render....

    chenatu 評(píng)論0 收藏0

  • react組件通信實(shí)現(xiàn)表單提交

    摘要：組件通信實(shí)現(xiàn)表單提交昨晚做了一個(gè)的例子，主要實(shí)現(xiàn)的是提交表單實(shí)現(xiàn)評(píng)論的功能，在做之前先簡(jiǎn)單介紹一下。并稱(chēng)為前端大框架，就目前來(lái)看，盡管發(fā)布了也在今年月份發(fā)布了，更不在話(huà)下，大家要是想學(xué)習(xí)的話(huà)可以去官網(wǎng)學(xué)習(xí)。 react組件通信實(shí)現(xiàn)表單提交 昨晚做了一個(gè)react的例子，主要實(shí)現(xiàn)的是提交表單實(shí)現(xiàn)評(píng)論的功能，在做之前先簡(jiǎn)單介紹一下React。 showImg(https://segment...

    LoftySoul 評(píng)論0 收藏0

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見(jiàn)，通過(guò)機(jī)制傳遞即可。我們應(yīng)該聽(tīng)說(shuō)過(guò)高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過(guò)程中總結(jié)出來(lái)的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書(shū)以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    neuSnail 評(píng)論0 收藏0

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見(jiàn)，通過(guò)機(jī)制傳遞即可。我們應(yīng)該聽(tīng)說(shuō)過(guò)高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過(guò)程中總結(jié)出來(lái)的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書(shū)以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    wyk1184 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<