React(JSX语法)-----JSX属性
1. if you know all the propertities that you want to place on a component ahead of time,it is easy to use JSX:
var component = <Component foo={x} bar={y}/>
2. This is an anti-pattern (反面实例---错误的) because it means that we can't help you check the right propTypes until way later.This means that your propTypes errors end up with a cryptic stack trace.
var component = <Component/>;
component.props.foo = x; //bad
component.props.bar = y;//also bad
the props should be considered immutable at this point(认为是不可改变的).Mutating the props object somewhere else could cause unexpected consequences so ideally it would be a frozen object at this point.
3.you can use a new feature of JSX called spread attributes:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props}>;
the properties of the object that you pass in are copied onto the component's props.you can use this multiple times or combine it with other attributes.The specification order id important.Later attributes override previous ones;
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
React(JSX语法)-----JSX属性的更多相关文章
- React(JSX语法)-----JSX基本语法
JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...
- React(JSX语法)----JSX拼写
注意:For DOM differences,such as the inline style attribute,check here. // bad: it displays "FIrs ...
- 22-React JSX语法
React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...
- 1.2 JSX 语法
官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html JSX 语法听上去很讨厌,但当真正使用的时候会发现,JSX 的写法在组件的组合 ...
- 2.ReactJS基础(虚拟DOM,JSX语法)
将脚手架(create-react-app)创建的todolist项目精简为hello world示例 即,删除自动生成的样式文件.logo.svt.App.test.js.serviceWorker ...
- React JSX语法说明
原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...
- react.js 从零开始(三)JSX 语法及特点介绍
什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- React的JSX语法及组件
最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...
随机推荐
- Android中的动画效果
动画的种类 透明动画alphaAnimation 在代码中配置动画: findViewById(R.id.btnAnimMe).setOnClickListener(new View.OnClickL ...
- curl post
//Post方式实现 $url = "http://localhost/web_services.php"; $post_data = array ("username& ...
- .net 读取Excel文件报错
错误内容 Microsoft Office Excel 不能访问文件“D:\WWWRoot\Website\Test\Excels\Test1.xls”. 可能的原因有: 1 文件名称或路径不存在. ...
- one recursive approach for 3, hdu 1016 (with an improved version) , permutations, N-Queens puzzle 分类: hdoj 2015-07-19 16:49 86人阅读 评论(0) 收藏
one recursive approach to solve hdu 1016, list all permutations, solve N-Queens puzzle. reference: t ...
- Altium Designer自动更新——解决方法
今天,打开AD,一直显示更新,关机重启也不管事. 然后,我把AD安装目录下,system文件夹下的Installation文件夹删了.就不再更新了.
- 清华微积分-1_Ch1习题
U3-1 Here are some sets: (1) R both and (2) ∅ both and (3) (1,+∞) open set (4) [−1,0] closed set, - ...
- sqlserver 存储过程分页管理
-- =============================================-- Author: <Author:刘畅>-- Create date: <Cre ...
- 第3.3 案例2: 工作队列 job queue
第2个案例就是工作队列,典型的点对点的消息,一个Producer发送一个工作消息到队列去,具有Listener类的Consumer能够从工作队列中获得一个工作情况的消息,这个消息被这个消费者消费掉之后 ...
- PHP 删除文件(图片)
/** * 删除图片或文件 * @author Zhenwei Zhang <772979140@qq.com> * @param string $pic 图片或文件地址 */functi ...
- 在linux使用make编译ArduPilot for Pixhawk/PX4 ArduPilot 编译环境搭建
Building ArduPilot for Pixhawk/PX4 on Linux with Make 使用Make编译 ArduPilot for Pixhawk 2, Pixhawk and ...