React 之props属性
React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。
可以使用 JSX 展开属性 来合并现有的 props 和其它值:
return <Component {...this.props} more="values" />;
如果不使用 JSX,可以使用一些对象辅助方法如 ES6 的 Object.assign
或 Underscore _.extend
。
return Component(Object.assign({}, this.props, { more: 'values' }));
下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。
手动传递
大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
React.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.getElementById('example')
);
但 name
这个属性怎么办?还有 title
、onMouseOver
这些 props?
在 JSX 里使用 ...
传递
有时把所有属性都传下去是不安全或啰嗦的。这时可以使用解构赋值中的剩余属性特性来把未知属性批量提取出来。
列出所有要当前使用的属性,后面跟着 ...other
。
var { checked, ...other } = this.props;
这样能确保把所有 props 传下去,除了 那些已经被使用了的。
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` 包含 { onClick: console.log } 但 checked 属性除外
return (
<div {...other} className={fancyClass} />
);
}
});
React.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.getElementById('example')
);
注意: 上面例子中,
checked
属性也是一个有效的 DOM 属性。如果你没有使用解构赋值,那么可能无意中把它传下去。
在传递这些未知的 other
属性时,要经常使用解构赋值模式。
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// 反模式:`checked` 会被传到里面的组件里
return (
<div {...this.props} className={fancyClass} />
);
}
});
使用和传递同一个 Prop
如果组件需要使用一个属性又要往下传递,可以直接使用 checked={checked}
再传一次。这样做比传整个 this.props
对象要好,因为更利于重构和语法检查。
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
注意: 顺序很重要,把
{...other}
放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是"checkbox"
。
剩余属性和展开属性 ...
剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。
这是 JSX 命令行工具 配合 --harmony
标记来启用 ES7 语法。
使用 Underscore 来传递
如果不使用 JSX,可以使用一些库来实现相同效果。Underscore 提供 _.omit
来过滤属性,_.extend
复制属性到新的对象。
var FancyCheckbox = React.createClass({
render: function() {
var checked = this.props.checked;
var other = _.omit(this.props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
});
- Silverlight初级教程-绘图布局
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(66)-MVC WebApi 用户验证 (2)
- 微信产品经理的妥协还是用户的需求?
- CSLA .NET 3.6支持Silverlight 2
- WCF技术剖析之二:再谈IIS与ASP.NET管道
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(61)-如何使用框架来开发
- (保存)C#基础概念二十五问
- flash留言本
- 这或许是2017年最有设计感的“无人车”推文
- 世界首条光伏高速公路:能发电,能充电,能化雪
- WCF技术剖析之四:基于IIS的WCF服务寄宿(Hosting)实现揭秘
- 简练的视图模型 ViewModel
- 提供智能服务?先迈过数字信任这个坎
- 《天弋夺宝》—01飞船的控制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 理解装饰器是怎么使用的
- 第十一节:Activiti6.0——定时器开始事件、消息开始事件和错误开始事件介绍
- linux centos 安装mailx邮件服务器并测试发送一封邮件
- 深入分析Vue-Router原理,彻底看穿前端路由
- linux LVM 一键分区脚本自动扩容
- 再谈构造函数、原型、原型链之间的关系
- Java ConcurrentHashMap 高并发安全实现原理解析
- 第十二节:Activiti6.0——四种边界事件:定时器、错误、信号、补偿
- parted 磁盘分区-挂载-删除-shell脚本进行磁盘分区
- Ubuntu18.04——安装MySQL
- 八种 Vue 组件间通讯方式合集
- Sharding-JDBC 实现分库分表
- fastjson——使用 aop 打印入参,报错:getOutputStream() has already been called for this response
- webpack从零搭建开发环境
- 博客——使用 Redis 实现博客编辑的自动保存草稿功能