浅谈React的JSX语法(一)
来源:互联网 发布:mac 下载文件路径 编辑:程序博客网 时间:2024/05/20 17:59
最好的解决方案是:通过JavaScript直接生成模板,然后去构建用户界面。
为了使其变得更简单,有一个非常简单、可选的类似HTML的语法 ,通过函数调用即可生成模板的编译器,称为JSX。
1、为什么用JSX?
不需要为了React使用JSX,可以直接使用JavaScript,但建议使用 JSX 是因为它能精确,也是常用的定义包含属性的树状结构的语法。
2、没有 JSX 的 React:
① 可以使用React.createElement()方法(请见:http://blog.csdn.net/zhouziyu2011/article/details/70493185);
② 可以使用React.createFactory()方法(工厂方法)(请见:http://blog.csdn.net/zhouziyu2011/article/details/70792179);
③ 可以使用React.DOM.*(React为HTML标签提供的内置工厂方法)(请见:http://blog.csdn.net/zhouziyu2011/article/details/70792179)。
JSX 是一个看起来很像XML的JavaScript语法扩展。
3、JSX的特点:
① JSX 不是必须用的,可以直接使用JavaScript;
② JSX 非常小;
③ JSX 类似于HTML,但不完全一样,如HTML对大小写不敏感,JSX对大小写敏感;HTML中不强制要求标签闭合,但JSX要求标签一定要闭合;JSX的组件要以大写字母开头,以便与HTML标签区分。
4、HTML标签 VS React组件
在JSX语法中,遇到HTML标签(以<开头)就用HTML规则解析,遇到代码块(以{开头)就用JavaScript规则解析。
React可以渲染HTML标签或React组件类:要渲染HTML标签,只需在JSX里使用小写字母的标签名;要渲染React组件,只需创建一个大写字母开头的本地变量。即,JSX 使用大、小写来区分React组件类和HTML标签。
注意:由于JSX就是JavaScript,class 和 for 等标识符不建议作为属性名,因此React DOM 使用 className 和 htmlFor作为相应的属性名。
5、JSX与原生JavaScript:
JSX形式的语法会编译成原生JavaScript的形式:
JSX形式的语法中的元素、属性和子节点被转换成 原生JavaScript中的React.createElement ()的参数:
① JSX:
React.createElement('a', {href: 'https://www.baidu.com'}, 'Hello React!')
② 原生JavaScript:
<a href="https://www.baidu.com">Hello React!</a>
React.createClass创建组件类时,可以通过displayName属性定义组件类的显示名称,但这是可选的,当显示名称没有定义时,JSX 会根据变量赋值来推断组件类的显示名称,即为组件类赋值的变量名称,因此,一般不显式设置displayName属性。
① JSX:
var Box = React.createClass({...});
② 原生JavaScript:
var Box = React.createClass({displayName: "Box",...});
6、命名组件
如果构建一个有很多子组件的组件,如表单,最终可能会得到许多的变量声明。
因此,命名组件支持单一的组件,其他子组件作为其属性。
① JSX:
var FormBox = React.createClass({ ... });FormBox.Label = React.createClass({ ... });FormBox.Input = React.createClass({ ... });FormBox.Button = React.createClass({ ... });
② 原生JavaScript:
var FormBox = (React.createElement(FormBox, null, React.createElement(FormBox.Label, null,React.createElement(FormBox.Input, null),React.createElement(Form.Button, null) ) ));
注意:命名组件仅在 v0.11 及以上可用。
7、JavaScript表达式
JSX遇到大括号就当作JavaScript表达式来看待。
① 属性表达式:
要使用JavaScript表达式作为属性值,只需把表达式用一对大括号{}包起来,不要用引号""。
ReactDOM.render( <TimeBox time={new Date().getHours() > 12 ? new Date().getHours() - 12 + "PM": new Date().getHours() + "AM"} />, document.getElementById('timeBox') );
② Boolean属性:
省略一个属性的值会导致JSX将其当作 true,要传值 false必须使用属性表达式。这常出现于HTML表单元素中,如disabled, required, checked 和 readOnly等属性。
eg1:
ReactDOM.render( <input type="button" value="submit" disabled />, document.getElementById('timeBox') );
等价于:
ReactDOM.render( <input type="button" value="submit" disabled="true" />, document.getElementById('timeBox') );
也等价于:
ReactDOM.render( <input type="button" value="submit" disabled={true} />, document.getElementById('timeBox') );
eg2:
ReactDOM.render( <input type="button" value="submit"/>, document.getElementById('timeBox') );
等价于:
ReactDOM.render( <input type="button" value="submit" disabled="false" />, document.getElementById('timeBox') );
也等价于:
ReactDOM.render( <input type="button" value="submit" disabled={false} />, document.getElementById('timeBox') );
③ 子节点表达式:
同样地,JavaScript 表达式可用于描述子结点:
var TimeBox = React.createClass({ render:function(){ return ( <p>{new Date().getHours() > 12 ? new Date().getHours() - 12 + "PM": new Date().getHours() + "AM"}</p> ); } });ReactDOM.render( <TimeBox />, document.getElementById('timeBox') );
8、注释
当要在一个标签的子节点块添加注释时,要用 {} 包围要注释的部分。
- 浅谈React的JSX语法(一)
- 浅谈React的JSX语法(二)
- React学习之JSX语法讲解(一)
- react的学习之路之一(1)-------jsx语法;
- React学习(二)JSX语法
- React入门狂想曲(二)-JSX语法
- React之JSX语法
- React(2) JSX语法
- React之JSX语法
- React之JSX语法
- react jsx语法
- JSX语法入门(一)
- React Native学习笔记(2)--React与JSX语法
- React入门:关于JSX语法
- React入门:关于JSX语法
- react——JSX语法
- React基础之JSX语法
- React语法基础之JSX
- Linux编程手册读书笔记第五章(20140408)
- NodeJs开发工具
- Titan 1.0.0存在问题以及JanusGraph的改进
- mysql小技巧
- keras 中文文档 网址
- 浅谈React的JSX语法(一)
- SIFT/SURF算法的深入剖析——谈SIFT的精妙与不足
- Android 数据库的升级降级操作
- Java中Timer的用法
- iOS设备的wifi获取,包括wifi名称,ip地址 (.m文件)
- python:多线程+队列Queue 实现:生产者和消费者demo
- Android Json数据解析
- mac系统中Finder的侧边栏里文件显示隐藏
- OpenCV-矩阵的创建和释放