成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

“React組件間通信”學習筆記

darcrand / 526人閱讀

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

父組件->子組件：props

子組件->父組件：callback

子組件->子組件：子組件通過回調(diào)改變父組件中的狀態(tài)，通過props再修改另一個組件的狀態(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"))
        };
    },
    //給子組件一個回調(diào)函數(shù)，用來更新父組件的狀態(tài)，然后影響另一個組件
    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è)置默認年為今年
            month: parseInt(util.formatDate(newDate, "MM"))//設(shè)置默認日為今天
        };
    },
    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方法來修改狀態(tài)值，
        //每次修改之后都會自動調(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方法來修改狀態(tài)值，
        //每次修改之后都會自動調(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"))
        };
    },
    //給子組件一個回調(diào)函數(shù)，用來更新父組件的狀態(tài)，然后影響另一個組件
    handleFilterUpdate: function (filterYear, filterMonth) {
        this.setState({
            year: filterYear,
            month: filterMonth
        });//刷新父組件狀態(tài)
    },
    render: function () {
        return (
            

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

        )
    }
});

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/86302.html

相關(guān)文章

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

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

    CoderBear 評論0 收藏0

  • React組件間通信

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

    chenatu 評論0 收藏0

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

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

    LoftySoul 評論0 收藏0

  • react進階漫談

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

    neuSnail 評論0 收藏0

  • react進階漫談

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

    wyk1184 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<