设想复合组件

媒介

你问我为何写博客? 由于阿拉斯加爱写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了，汪汪汪！）。