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

夜尽天明

发布于 2019-11-13 10:24:29

3890

发布于 2019-11-13 10:24:29

文章被收录于专栏：全栈修炼全栈修炼

设计复合组件

前言

你问我为什么写博客? 因为阿拉斯加爱写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 (
                        <div style={squareStyle}>
                         { this.props.content }
                        </div>
                    );
                }
            });

第二部分代码如下：

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

第三部分代码如下：

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 (
                        <div style={cardStyle}>
                            <Square color={this.props.color} content={this.props.content} />
                            <Label color={this.props.color} desc={this.props.desc}/>
                        </div>
                    );
                }
            });

当然还有最后的调用如下：

ReactDOM.render(
        <div>
            <Card color="#FFA737"  content="我是内容" desc="我是描述" />
        </div>,
        destination
);

效果如上图卡片所示。可以看到，不少值都是父组件 Card 通过 props 传递给子组件Label和Square的，这样子可以实现多种变化，不会定死只能是一个内容了，体现了组件的可扩展性。

4. 后语

虽然看上去很简单，但是建议初学者自己敲一遍，可能会出现各种各样的问题。学习，千万不能有所见即所得的想法，实践才是检验真理的唯一标准。

本节内容完毕！下节内容：「react 基础之组件篇三」将讲解设计复合组件。

原代码我都已经上传到 github了，有兴趣的可以去了解一下。

传送门 https://github.com/biaochenxuying/react-learning

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-07-03，如有侵权请联系 cloudcommunity@tencent.com 删除

react

github

git

开源

本文分享自全栈修炼微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度