React(三)JSX内置表达式
(一)JSX是什么?
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX,但它有以下优点:
- JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的,在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
(二)使用 JSX
(1)注释写法
{/* 哈哈哈,你好 */}
(2)添加自定义属性
需要使用 data- 前缀。
<p data-myattribute = "hhhh">这是一个很不错的 JavaScript 库!</p>
(3)JSX 中不能使用 if else 语句,但是可以使用三元表达式
表达式写在花括号 {} 中
<p className="App-intro">{userName == '' ? '用户没有登录' : '用户名:' + userName}</p>
(4)React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>哈哈哈</h1>,
document.getElementById('example')
);
(5)属性绑定
<p><input type="button" value={userName} disabled={boolInput} /></p>
(6)JSX 允许在模板中插入数组,数组会自动展开所有成员
var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术,更是梦想!</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
(7)html展示
a:通过Unicode转码
b:通过 dangerouslySetInnerHTML 设置 html
(此方法可能会存在 XSS 攻击)
<p dangerouslySetInnerHTML = {{__html:html}}></p>
React(三)JSX内置表达式的更多相关文章
- React入门---JSX内置表达式-6
个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 ...
- 从零开始的JS生活(三)——内置对象
咱们继续进行我们的正经的JS介绍.今天所要跟大家讲述的是JS中十分常用.十分常用.十分常用的内置对象. 一.世界上最熟悉的陌生就是,当你看着数组.而我看着你... - 数组对象 1.数组的概念 在内存 ...
- Python基础学习参考(三):内置函数
一:内置函数 在第一篇文章中,我们简单的认识了一下print()函数和input()函数,也就是输入和输出,这些函数我们可以直接的调用,不要自己定义或者引入什么,对吧?想这样的函数就叫做内置函数.这里 ...
- python exec内置表达式--exec()
exec obj功能: exec 执行储存在字符串或文件中的Python语句,相比于 eval,exec可以执行更复杂的 Python 代码.obj 是 要执行的表达式.exec 返回值永远为 Non ...
- python面向对象基础(三)内置方法 __xx__
__str__和__repr__,__format__ 改变对象的字符串显示__str__,__repr__ 自定制格式化字符串__format__ #_*_coding:utf-8_*_ forma ...
- python 装饰器(六):装饰器实例(三)内置装饰器
内置的装饰器和普通的装饰器原理是一样的,只不过返回的不是函数,而是类对象,所以更难理解一些. @property 在了解这个装饰器前,你需要知道在不使用装饰器怎么写一个属性. def getx(sel ...
- Maven系列三Maven内置变量
Maven内置变量说明: ${basedir} 项目根目录(即pom.xml文件所在目录) ${project.build.directory} 构建目录,缺省为target目录 ${project. ...
- 开源的Android开发框架-------PowerFramework使用心得(三)内置浏览器BrowserActivity
使用内置浏览器必须是引用源码的方式(因为jar中不能打包布局文件等资源).内置浏览器是一个继承自BaseActivity的普通Activity,使用WebView实现. 1.简单的打开内置浏览器 In ...
- 咸鱼入门到放弃8--jsp<三>jsp内置对象
NO. 内置对象 类型 1 pageContext javax.servlet.jsp.PageContext 2 request javax.servlet.http.HttpServletRequ ...
随机推荐
- ZooKeeper-客户端命令 zkCli
执行 bin/zkCli 文件进入客户端 查看帮助 help ZooKeeper -server host:port cmd args stat path [watch] set path data ...
- vue动态添加对象属性,视图不渲染
发现数据确实改变了.但是视图没有渲染.原因是赋值的问题,应该这样动态增加属性 vm.$set(vm.template.titleAttachInfoDetail,newKey,newVal) vm 当 ...
- Python 各种进制转换
#coding=gbk var=input("请输入十六进制数:") b=bin(int(var,16)) print(b[2:]) 详细请参考python自带int函数.bin函 ...
- Lookup dict 并将属性更新于lookupdict object中
# encoding:utf-8class LookupDict(dict): """Dictionary lookup object.""" ...
- java(10)类的无参方法
一.变量的作用域(有效的使用范围) 1.变量有2种 1.1成员变量(属性) 声明在类的里面,方法的外面 1.2 局部变量 声明在方法里面或for循环结构中 2.调用时的注意事项(初始值不同.作用域不同 ...
- Ubuntu解决没有可安装候选软件包
解决方法:可以使用apt-cache search <package_name>寻找. 例如: E: 软件包 libqglviewer-dev 没有可安装候选 解决方法: apt-cach ...
- phpstudy 安装Apache SSL证书实现https连接
Windows phpstudy安装ssl证书教程. 工具/原料 phpstudy 集成环境 申请的SSL证书 方法/步骤 首先申请免费的ssl证书,很多地方都可以申请.我是在腾讯云!如图 ...
- php页面编码设置
php的header来定义一个php页面为utf编码或GBK编码 php页面为utf编码 header("Content-type: text/html; charset=utf-8&quo ...
- Solr坏境搭建
1.1. 搭建步骤 第一步:把solr 的压缩包上传到Linux系统 第二步:解压solr. 第三步:安装Tomcat,解压缩即可. 第四步:把dist目录下的solr.war部署到Tomcat下. ...
- Flask开发微电影网站(十)
1.后台管理之角色管理 1.1 角色管理之定义角色表单 在app的admin目录的forms.py文件中,定义角色表单 # 角色表单 class RoleForm(FlaskForm): name = ...