react 基础之组件篇——设计复合组件

MarvinZhang 发布于2019-08-23 10:27 / 3185人阅读

摘要：提醒设计组件时，一般都按照把控大局，再设计好每个小组件的规律。本节内容完毕下节内容基础之组件篇三将讲解设计复合组件。

设计复合组件

前言

你问我为什么写博客? 因为阿拉斯加爱写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语言程序设计基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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