react 基礎之組件篇——設計復合組件

MarvinZhang 發布于2019-08-23 10:27 / 3198人閱讀

摘要：提醒設計組件時，一般都按照把控大局，再設計好每個小組件的規律。本節內容完畢下節內容基礎之組件篇三將講解設計復合組件。

設計復合組件

前言

你問我為什么寫博客? 因為阿拉斯加愛寫bugger！！！

微信公眾號：愛寫bugger的阿拉斯加
如有問題或建議，請往公眾號，我們一起交流如何寫bugger !

書接上文——react 基礎之組件篇二——Style in React
本節精彩繼續，阿拉斯加繼續裝逼如何優雅的寫bugger！！！

1. 復合組件要怎么設計？ 1.本節內容將實現如下效果，一個卡片。

分析

首先這個卡片可以分成三部分：
第一部分有背景色的內容分
第二部分是下面的描述部分
第三部分最大的盒子

直接在 style 里面先定義好類名與樣式，組件上寫好對應的樣式名className 即可。

提醒： 設計組件時，一般都按照把控大局，再設計好每個小組件的規律。

第一部分代碼如下：

var Square = React.createClass({
                render: function() {
                    var squareStyle = {
                        height: 150,
                        backgroundColor: this.props.color,
                        textAlign: "center",
                        color: "white",
                        lineHeight:"150px"
                    };
                    return (
                        
                         { this.props.content }
                        
                    );
                }
            });

第二部分代碼如下：

var Label = React.createClass({
                render: function() {
                    var labelStyle = {
                        fontFamily: "sans-serif",
                        fontWeight: "bold",
                        padding: 3,
                        margin: 0,
                        textAlign: "center",
                    };
                    return (
                        
                            { this.props.desc }
                        
                    );
                }
            });

第三部分代碼如下：

var Card = React.createClass({
                render: function() {
                    var cardStyle = {
                        height: 200,
                        width: 150,
                        backgroundColor: "#FFF",
                        WebkitFilter: "drop-shadow(0px 0px 5px #666)",
                        filter: "drop-shadow(0px 0px 5px #666)"
                    };
                    return (
                        
                            
                            
                        
                    );
                }
            });

當然還有最后的調用如下：

ReactDOM.render(
        
            
        ,
        destination
);

效果如上圖卡片所示。
可以看到，不少值都是父組件 Card 通過 props 傳遞給子組件Label和Square的，這樣子可以實現多種變化，不會定死只能是一個內容了，體現了組件的可擴展性。

4. 后語

雖然看上去很簡單，但是建議初學者自己敲一遍，可能會出現各種各樣的問題。學習，千萬不能有所見即所得的想法，實踐才是檢驗真理的唯一標準。

本節內容完畢！下節內容：「react 基礎之組件篇三」將講解設計復合組件。

原代碼我都已經上傳到 github了，有興趣的可以去了解一下。

?傳送門

有興趣的朋友可以長按下方二維碼關注我的公眾號（不喂一波狗糧，阿拉斯加就變廢dog了，汪汪汪！）。

云服務器 GPU云服務器之基礎篇組件設計基礎地圖組件 java語言程序設計基礎篇

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

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

前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0
react源碼解析之stack reconciler

摘要：爭取把源碼剖析透學習透。除了用戶定義的復合組件外元素還可能表示特定于平臺的主機組件。裝載的具體結果有時在源代碼中稱為裝載映像取決于渲染器，可能為節點字符串服務器或表示本機視圖的數值。其所缺少的關鍵部分是對更新的支持。關于源碼解讀的系列文章，可以關注我的github的這個倉庫, 現在才剛剛寫，后續有空就寫點。爭取把react源碼剖析透學習透。有不正確的地方希望大家幫忙指正。大家互相學習...

ky0ncheng 2019-08-22 17:30 評論0 收藏0
前端每周清單半年盤點之 Angular 篇

摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0
React 應用設計之道 - curry 化妙用

摘要：右側展現對應產品。我們使用命名為的對象表示過濾條件信息，如下此數據需要在組件中進行維護。因為組件的子組件和都將依賴這項數據狀態。化應用再回到之前的場景，我們設計化函數，進一步可以簡化為對于的偏應用即上面提到的相信大家已經理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

sewerganger 2019-08-22 16:27 評論0 收藏0