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

设计复合组件

前言

你问我为什么写博客? 因为阿拉斯加爱写bugger！！！

微信公众号：爱写bugger的阿拉斯加
如有问题或建议，请往公众号，我们一起交流如何写bugger !

书接上文——react 基础之组件篇二——Style in React
本节精彩继续，阿拉斯加继续装逼如何优雅的写bugger！！！

1. 复合组件要怎么设计？

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了，有兴趣的可以去了解一下。

 传送门

有兴趣的朋友可以长按下方二维码关注我的公众号（不喂一波狗粮，阿拉斯加就变废dog了，汪汪汪！）。