22-React JSX语法
React JSX语法
JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和组件之间的关系看上去更加清晰。
例如:
var Nav = React.createClass({/*...*/});
var app = <Nav color=“blue"><Profile>click</Profile></Nav>;
会被转化成
var Nav = React.createClass({/*...*/});
var app = React.createElement(Nav,{color:"blue"},React.createElement(Profile, null, "click")
);
ReactElement createElement(string/ReactClass type,[object props],[children ...]
)
这个方法的第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。从第三个参数开始,之后的参数都被认作是元素的子元素。
使用jsx和不适用jsx的区别
// 使用JSX
React.render(<div><div><div>content</div></div></div>,document.getElementById('example')
);// 不使用JSX
React.render(React.createElement('div', null,React.createElement('div', null,React.createElement('div', null, 'content'))),document.getElementById('example')
);
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
要渲染 React 组件,只需创建一个大写字母开头的本地变量。
React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
注意:
由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。
JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成 React.createElement 的参数。
注意:
JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过 React.createElement 里的校验代码。
属性表达式
要使用 JavaScript表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 (“”)。
// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ‘ ‘} />;
// 输出 (JS):
var person = React.createElement(Person,{name: window.isLoggedIn ? window.name : ''}
);
子节点表达式
同样地,JavaScript 表达式可用于描述子结点。
// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(Container,null,window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
注释
JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。
/var content = (<Nav>{/* 一般注释, 用 {} 包围 */}<Person/* 多行注释 */name={window.isLoggedIn ? window.name : ''} // 行尾注释/></Nav>
);
转载于:https://www.cnblogs.com/fengxuefei/p/6250598.html
22-React JSX语法相关推荐
- React jsx语法学习
目录 1. 需要准备的三个文件 2. jsx 和 js 创建虚拟DOM 的区别 3. jsx语法 (1)创建虚拟DOM不要加引号 (2)使用js定义的变量 (3)使用calss类名 (4)使用styl ...
- React学习(1)——JSX语法与React组件
为什么80%的码农都做不了架构师?>>> 本文记录了在官网学习如何使用JSX+ES6开发React的过程. 全文共分为3篇内容: JSX语法与React组件 状态.事件与动态渲 ...
- React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
- react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...
- jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程,什么是JSX?
在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
- React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...
- React基础-JSX语法介绍
文章目录 JSX语法介绍 认识JSX语法 JSX注释编写 JSX语法介绍 认识JSX语法 我们先来看一段代码 // 定义根组件 const element = <div>Hello Wor ...
- React 学习笔记:JSX 语法
JSX JSX 是 JavaScript XML 的简写,表示了在 JavaScript 中书写 XML 格式的代码.它可以让我们在 React 中创建元素更加简单,并且保留 HTML 代码的结构更直 ...
- react 中 JSX 语法的转化过程
JSX 语法的转化过程 JSX 仅仅是 createElement() 方法的语法糖(简化语法) JSX 语法被 @babel/preset-react插件 编译为 createElement() 方 ...
最新文章
- 为何Redis要比Memcached好用(转)
- php 二维数组排序函数,php自定义二维数组排序函数array
- 禅道设置bug模板_JPress v3.0 beta.2 发布,修复 bug 和完善产品细节
- 生信分析平台方案推介,助力科研
- 假如我是超级卷王......
- io读取一个文件再写入socket技术_JAVA中IO与NIO面试题
- RabbitMQ Node.js 示例
- 从今天开始,学习Webpack,减少对脚手架的依赖(下)
- 【安全漏洞】gomarkdown/markdown 项目的 XSS 漏洞产生与分析
- [TCP/IP] HTTPS的工作原理
- oracle 中的trunc()函数及加一个月,一天,一小时,一分钟,一秒钟方法
- 物体检测 | 29篇顶会(刊)论文集
- java rtti_java对RTTI的所有需要
- 【Android】Fresco图片加载框架(二)————Producer
- 机器人电焊电流电压怎么调_西安焊接机器人工作站的主要设备有哪些?西安瑞斯曼...
- JavaScript学习 第二课(二)
- MySQL中int(11)最大长度是多少?
- LuoguP4234_最小差值生成树_LCT
- 笔记本如何解除锁定计算机,笔记本电脑数字小键盘如何解锁_笔记本电脑数字键盘被锁定了如何打开-win7之家...
- 如何横扫棋坛?AlphaGo 先随机扔了一个骰子
热门文章
- 冒泡、选择、插入排序算法
- python列表的append/entend/insert
- BZOJ 1604 [Usaco2008 Open]Cow Neighborhoods 奶牛的邻居:队列 + multiset + 并查集【曼哈顿距离变形】...
- ubuntu apt-get install xxx命令,下载的路径及清除方式
- OpenSuSe使用相关
- (译)在Objective-c里面使用property教程
- 2018秋寒假作业5—PTA编程总结2
- Xmind settings lower
- mac 下配置连接Linux服务器方法,上传下载文件操作
- Ubuntu 开发环境搭建