设计复合组件
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. 后语
虽然看上去很简单，但是建议初学者自己敲一遍，可能会出现各种各样的问题。学习，千万不能有所见即所得的想法，实践才是检验真理的唯一标准。
