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

darcrand 發布于2019-08-21 10:51 / 477人閱讀

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

子父組件間通信

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

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 (
            
                {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"))
        };
    },
    //給子組件一個回調函數，用來更新父組件的狀態，然后影響另一個組件
    handleFilterUpdate: function (filterYear, filterMonth) {
        this.setState({
            year: filterYear,
            month: filterMonth
        });//刷新父組件狀態
    },
    render: function () {
        return (
            
                
                //父組件狀態被另一個子組件刷新后，這個子組件就會被刷新
            
        )
    }
});

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86302.html

解密傳統組件間通信與React組件間通信

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

CoderBear 2019-08-23 12:01 評論0 收藏0
React組件間通信

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

chenatu 2019-08-20 18:17 評論0 收藏0
react組件通信實現表單提交

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

LoftySoul 2019-08-20 18:16 評論0 收藏0
react進階漫談

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

neuSnail 2019-08-20 14:16 評論0 收藏0
react進階漫談

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

wyk1184 2019-08-30 15:52 評論0 收藏0