RN开发-JSX基础语法
1、环境
react.js
react-dom.js
browser.min.js(解码器)
2、载入方式
内联、外联
3、标签
HTML,ReactJS自定义组件类
4、转换器(解析器)
<h1>zxx</h1> --> React.createElement("h1",null,"zxx");
返回一个ReactElement对象
第一个参数: 标签
第二个参数: 标签属性
第三个参数: 标签值
5、执行JavaScript表达式
var msg = "zxzxzx";
<h1>{msg}</h1> --> React.createElement("h1",null,msg);
6、注释
// 和 /* */
7、属性
var msg = <h1 width="10px">zxzxzx</h1>
--> React.createElement("h1",{width:"10px"},"zxzxzx")
8、延展属性
使用ES6语法 (...循环遍历,=>箭头函数)
var props={};
props.foo="1";
props.bar="1";
<h1 {...props} foo="2">zxzxzx</h1>
--> React.createElement("h1",React.__spread({},props,{foo:"2"}),"zxzxzx")
9、自定义属性
data- 开头的自定义属性,可以渲染到页面
<h1 height="10px" data-test="test" test="zxx"></>
其中data-test会渲染到页面,test不会
10、显示HTML字符串
借助属性: _html
<div>
{{_html:'<h1>zxzxzx</h1>'}}
</div>
11、样式使用
通过style属性定义
<h1 style={{color:'#ff0000',fontSize:'14px'}}></h1》
外层{} JSX语法
内层{} JavaScript对象
12、事件绑定
<script>
function testClick(){}
var app = <button onClick={testClick.bind(this)}
style{{height:'100px'}}>点击</button>
React.render(app,document.findElement("demo"));
</script>
RN开发-JSX基础语法的更多相关文章
- python全栈开发day110-Flask基础语法
1.Flask 初识: 短小精悍,三方支持的组件多 稳定性较差 2.三行 :启动flask服务 from flask import Flask app = Flask(__name__) app.ru ...
- JAVA企业级开发-xml基础语法&约束&解析(04)
一.什么是xml html:超文本标记语言.它主要是用来封装页面上要显示的数据,最后通过浏览器来解析html文件,然后把数据展示在浏览器上.同样我们可以使用JS和DOM技术对html文件进行解析和操作 ...
- VBA 开发学习--基础语法3
VBA字符串函数列表 Trim(string) 去掉string左右两端空白 Ltrim(string) 去掉string左端空白 Rtrim(string) 去掉string右端空白 Len(str ...
- VBA 开发学习--基础语法2
VBA中的运算符 算数运算符及其作用 + 求两个数的和 - 求两个数的差:求一个数的相反数 * 求两个数的积 / 求两个数的商(保留小数位 5/2=2.5) \ 整除 (保留整数位 ...
- VBA 开发学习--基础语法
MsgBox "开始学习VBA" '提示框 Dim str As String '声明str变量是string类型 Let str = "一起来看流星雨" '给 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- 前端开发利器 Emmet 介绍与基础语法教程
在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...
- JSP开发中的基础语法
JSP 语法 JSP开发中的基础语法. 脚本程序 脚本程序可以包含任意量的Java语句.变量.方法或表达式,只要它们在脚本语言中是有效的. 脚本程序的语法格式: <% 代码片段 %> 或者 ...
- Java 教程(开发环境配置+基础语法)
Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境. window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.ora ...
随机推荐
- Map的底层实现原理
一,前言 1.1,概述 现实生活中,我们常会看到这样的一种集合:IP地址与主机名,身份证号与个人,系统用户名与系统用户对象等,这种一一对应的关系,就叫做映射(K-V).Java提供了专门的集合类用 ...
- C#设计模式学习笔记:(4)建造者模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7614630.html,记录一下学习过程以备后续查用. 一.引言 在现实生活中,我们经常会遇到一些构成比较复杂 ...
- Java中顺序、并行与并发
顺序(sequential)用于表示多个操作依次处理.例如把十个操作交给一个人处理 并行(parallel)用于表示多个操作同时处理.比如是个操作分给两个人操作,两个人会并行处理 并发(concurr ...
- JN_0015:ping IP 地址
1,打开命令窗口 2,ping www.baidu.com
- 在C#中使用RESTful API的几种好方法
什么是Restful API REST 即Representational State Transfer的缩写.直接翻译的意思是"表现层状态转化". 它是一种互联网应用程序的API ...
- 《The good doctor》视频笔记
第一季 第一弹可以看 角色 肖恩莫非 梅伦德斯 克莱尔·布朗 贾里德·卡鲁 道格拉斯院长 卡莉 青木 一个很厉害的女实习医生,忘记名字了 病理知识 自闭症:由于神经系统失调导致的发育障碍,其病征包括不 ...
- CF468A | 24 Game 找规律+打表
(翻译版本来自 Luogu by lonelysir ) 题目描述 小X一直很喜欢一个纸牌游戏:"24点",但最近他发现这个游戏太简单了,所以他发明了一个新游戏. 你有一个整数序列 ...
- 推荐7款用于PHP的代码调试工具,太有用了!
当谈论到服务器端的脚本语言时,大多数人都会首先想到PHP.在你写完代码后,使用一些检查方面的工具是非常有必要的,无论是单纯的代码调试工具,还是测试优化工具.下面就为广大的PHP开发者介绍7个专为PHP ...
- .NetCore学习笔记:一、UnitOfWork工作单元
Maintains a list of objects affected by a business transaction and coordinates the writing out of ch ...
- Mysql快速入门(三)
MySQL性能优化之查看执行计划explain 介绍: (1).MySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT 语句进行分析, 并输出 SELECT 执行的详细信息, 以供开发 ...