组件化思路:以selection为例子,使用prop-types实现组件化控制,重用
需求
书接上文,UI 积累之select section
这里又来两个需求了。
当我点击选择了option后,我应该看到的是我选择的option的内容
多例重用,即同样是个selection,我只是需要改点东西,其他不变,比如selection里面的字内容,font-size, font-family, selection的width, height等。。。如何只开发一个组件就满足这个“无理要求”呢?
第一只老虎--显示option内容
我们的dom是这样的:
<Selectsection>
<select>
<option>Please select one option...</option>
<option>...</option>
<option>...</option>
</select>
<span>Please select one option...</span>
<div></div>
</Selectsection>
具体实现,通过react的state倒是能很简单实现。
给select绑定个onChange事件,触发onSelect方法,当选择select的option的时候,把选到的值传给真正显示的span
问题来了:1)怎么拿。 2)怎么给
1)怎么拿:
点击的时候,通过event.target.value拿到选中的option的值
2)怎么给:
在组件渲染的时候,constructor里的state定义一个值存放选中的值,叫showValue,当选择时,在onSelect方法里,拿到event.target.value后,set给这个值,同时dom中的span进行this.state.showValue值绑定。
Talk is cheap, show me the code
完整代码如下:
class Selection extends Component {
constructor(props){
super(props)
this.state = {
showValue: "Please select one option..."
}
}
onSelect(e){
this.setState({showValue: e.target.value});
}
render() {
return (
<Selectsection>
<select onChange={this.onSelect.bind(this)}>
<option>Please select one option...</option>
<option>...</option>
<option>...</option>
</select>
<span>{this.state.showValue}</span>
<div></div>
</Selectsection>
);
}
}
实例图:
第二只老虎--组件化
看上面的代码可以知道,引入这个selection的方式是这样的
render(
<Selection />
)
但是你这个selection啊,我同一个页面要引入N个,其中一个高度要是40px,另一个宽度要长点,500px,还有一个长宽都不用变,你给我变下这个selection的default的字啊,不叫Please select one option..., 叫什么Please kindly select one option...,还有一个,你给我保持原样不变哈,谢谢了。
WTF, 怎么做呢?
需求啊,莫得办法
为了开发方便,我自己设计,要是能组件化,几个属性在引入的时候可以选择性定义就好了,比如:
render(
<div>
<Selection />
<Selection width="500px" />
<Selection height="40px" />
<Selection wordings="Please kindly select one option..."/ />
</div>
)
能这么实现就完美了。
怎么做呢,这就要引入一个包,叫prop-types了,定义属于这个组件的变量,然后将其运用到组件的每个dom的css上。
接下来以上述为例子。
定义属于这个组件的类型:
Selection.propTypes = {
height: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]),
width: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]),
words: PropTypes.string
}
Selection.defaultProps = {
height: '30px',
width: '300px',
words: 'Please select one option...'
}
然后就是通过react的this.props引入啦
Talk is cheap, show me the code
index.js
class App extends Component {
render() {
return (
<div>
<Selection />
<Selection height="40px" />
<Selection width="500px" />
<Selection words="Please kindly select one option..." />
</div>
);
}
}
Selection.js
class Selection extends Component {
constructor(props){
super(props)
this.state = {
showValue: this.props.words
}
}
onSelect(e){
this.setState({showValue: e.target.value});
console.log(e.target.value)
}
render() {
const { width, height } = this.props
const style = {
width: width,
height: height
}
const suitableHeight = (parseInt(height.substring(0, height.length-2)) - 30) / 2 + 6;
const spanStyle = {
width: width,
height: height,
paddingTop:suitableHeight
}
const arrowStyle = {
top:suitableHeight
}
return (
<Selectsection style={style}>
<select onChange={this.onSelect.bind(this)} value={this.state.showValue} style={style}>
<option>{this.props.words}</option>
<option>...</option>
<option>...</option>
</select>
<span style={spanStyle}>{this.state.showValue}</span>
<div style={arrowStyle}></div>
</Selectsection>
);
}
}
Selection.propTypes = {
height: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]),
width: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]),
words: PropTypes.string
}
Selection.defaultProps = {
height: '30px',
width: '300px',
words: 'Please select one option...'
}
效果图:
hm。。。应该差不多了,这里代码里就忽略了
自定义属性时候纯数字和字符串的判断
当height是比30小的时候的判断处理
有兴趣自己加
ok,完美收工
组件化思路:以selection为例子,使用prop-types实现组件化控制,重用的更多相关文章
- iOS组件化思路 <转>
随着应用需求逐步迭代,应用的代码体积将会越来越大,为了更好的管理应用工程,我们开始借助CocoaPods版本管理工具对原有应用工程进行拆分.但是仅仅完成代码拆分还不足以解决业务之间的代码耦合,为了更好 ...
- iOS组件化思路-大神博客研读和思考
一.大神博客研读 随着应用需求逐步迭代,应用的代码体积将会越来越大,为了更好的管理应用工程,我们开始借助CocoaPods版本管理工具对原有应用工程进行拆分.但是仅仅完成代码拆分还不足以解决业务之间的 ...
- Android基于代理的插件化思路分析
前言 正常的App开发流程基本上是这样的:开发功能-->测试--->上线,上线后发现有大bug,紧急修复---->发新版本---->用户更新----->bug修复.从发现 ...
- 修饰模式(Decorator结构化)C#简单的例子
修饰模式(Decorator结构化)C#简单的例子 播放器的基本功能是移动.执行等.BaseAbility 新增功能:1.伤害技能harmAbility:2.阻碍技能BaulkAbility:3.辅助 ...
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...
- DRF - 序列化组件(GET/PUT/DELETE接口设计)、视图优化组件
一.序列化组件 基于上篇随笔的表结构 , 通过序列化组件的ModelSerializer设计如下三个接口 : GET 127.0.0.1:8000/books/{id} # 获取一条数据,返回值:{} ...
- WeCenter 社交化问答社区程序 | WeCenter 是一款知识型的社交化问答社区程序,专注于社区内容的整理、归类、检索和再发行
WeCenter 社交化问答社区程序 | WeCenter 是一款知识型的社交化问答社区程序,专注于社区内容的整理.归类.检索和再发行 为什么选择 WeCenter 程序? 让您的社区更智能地运作,强 ...
- Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...
- Vue组件化应用构建 官网例子 Unknown custom element: <todo-item>
[博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] htt ...
随机推荐
- SAP PM:参考维护工单创建测量凭证
(1)使用FM:CO_BC_ORDER_POST获取工单资料(Aufnr, aufpo and materials etc): (2)使用FM:MEASUREM_DOCUM_RFC_SINGLE_00 ...
- JVM相关面试题
1.JVM 基本机构 1.1 类加载子系统负责从文件系统或者网络中加载Class信息,加载的类信息存放于一块称为方法区的内存空间.除了类的信息外,方法区中可能还会存放运行时常量池信息,包括字符串字面量 ...
- Redhat6更改yum源 (转)
最近虚拟机中安装了redhat6.3企业版,自带的yum用不起来,软件都找不到. 网上搜了一下说是没付钱...,需要改下yum源.操作步骤如下: 1.切换到yum源存放目录[root@rhel6 ~] ...
- 吴裕雄--天生自然 HADOOP大数据分布式处理:安装配置JAVA
tar -xzvf jdk-8u151-linux-x64.tar.gz -C /usr/local/src sudo vim /etc/profile .编辑/etc/profile # JAVA ...
- js求两个数的百分比
function toPercent(num, total) { return (Math.round(num / total * 10000) / 100.00 + "%");/ ...
- OpenCV 使用二维特征点(Features2D)和单映射(Homography)寻找已知物体
#include <stdio.h> #include <iostream> #include "opencv2/core/core.hpp" #inclu ...
- git获取公钥和私钥以及常用的命令
Git简单生成公钥和私钥的方法 Git安装完之后,需做最后一步配置.打开git bash,分别执行以下两句命令 git config --global user.name “用户名” git conf ...
- FPGA设计思想之串并转换
数据流中,用面积换速度-串行转并行的操作 并行转串行数据输出:采用计数方法,将并行的数据的总数先表示出来,然后发送一位数据减一,后面的接收的这样表示: data_out <= data[cnt] ...
- Java开发面试常见问题合集
次面试事故 面试官:你看过哪些源码?我:都挺熟悉的面试官:对hashMap了解程度怎么样?面试官:那你能讲讲 HashMap的实现原理吗?面试官:HashMap什么时候会进行 rehash?面试官:结 ...
- async样例
function iniProcessDetail(isjob) { var cursor = logColl.find({}).sort({ip: 1}); var insertbolk = []; ...