react 基础之组件篇三——设计复合组件
- 2019 年 11 月 13 日
- 笔记
设计复合组件
前言
你问我为什么写博客? 因为阿拉斯加爱写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
