使用JSX的注意事项
react中JSX是一种JavaScript + xml语法,用来创建虚拟DOM和声明组件。他可以更好的让我们读、写模板或组件。
JSX语法浏览器是不识别的,需要通过babel 来进行转换成浏览器识别的代码
JSX将虚拟DOM转换为真实DOM原理:
1、会基于babel-react-preset语法包,把 jsx变为React.createElement这种模式
2、通过createElement这个方法的执行生成一个对象(虚拟DOM对象)
{
key:null,
ref:null,
props:{},
type:'div'
...
}
3、基于react-dom中render方法,把创建的JSX对象放到指定的容器中
//ReactDOM.render([JSX对象],[容器],[回调])
JSX的优势:
1、JSX执行更快
2、更安全,编译时能及时发现错误
3、JSX 编写模板更加简单快速
JSX的注意事项:
1、使用JSX时要引入React库
2、jsx语法中只能有一个顶级标签(元素)
3、使用组件时,首字母必须大写
4、样式中 class, 写成 className
5、所有元素标签必须闭合(尤其单标签)
6、jsx表达式不能使用if else(可以使用三元运算符)
7、在JSX中通常通过{} 的方式插入值,但设置style属性需要{{ }}
8、注释方式
ReactDOM.render(
<div>
{/*JSX 中的注释方式*/}
</div>,
document.getElementById('root')
)
9、表单设置value默认值 要使用两种方式解决
//1、给表单元素加事件onChange(受控组件) <input value="1" onChange={(ev)=>{}}/> //2、定义默认值使用 defaultValue(非受控组件) <input value="1" defaultValue="1">
表单元素如果设置一个默认值(基于state中状态)
10、JSX中的花括号{}
1) 可以放任意js代码
//与vue区别,vue{{}} react {}
2) {}会默认展开数组
比如[1,2,3,4] 打印出的 是 1234
3) 注释 {/**/} 在花括号里面注释
4) {}还可以声明函数,但不能直接调用
5) 输出数据时候,赋值给某个元素属性
//比如 value={a}
6) 设置style也用{},里面可放对象
//比如style={{width:'200px','height:100px'}}
使用JSX的注意事项的更多相关文章
- 玩转 React【第02期】:恋上 React 模板 JSX
往期回顾 前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦,而且层级结构特别不清晰.今天我们来看一种优雅的编写React的代码的 ...
- 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
- 如何在iview组件中使用jsx
最近选用的框架iview表单组件的render写法让人有点不习惯,尤其是在写比较复杂的逻辑的时候,还是感觉模板式的写法比较方便且可读性较强.而render函数除了支持配置写法外,还支持jsx的写法.由 ...
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
- React使用JSX语法
目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法 <--返回目录 JSX语法:符合xml规范的js语法 JS ...
- 【原】webpack--loaders,主要解释为什么需要loaders和注意事项
Why需要loaders? webpack开箱即用只支持JS和JSON两种文件类型,但是比如css.less,还有目前市场上比较新的语法糖jsx,怎么处理呢? 通过Loaders去支持其他文件类型并且 ...
- 1.2 JSX 语法
官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html JSX 语法听上去很讨厌,但当真正使用的时候会发现,JSX 的写法在组件的组合 ...
- 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组(列表)循环输出
接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...
- React实践debug:JSX输出的限制(存疑)
今天在练习React构建组件的时候遇到一个问题. 由于文档中反复提倡将组件尽可能按功能单位分解复用.在练习用React做一个todolist时候,我把todolist分解成两部分: class Tod ...
随机推荐
- Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2)
第一次参加cf的比赛 有点小幸运也有点小遗憾 给自己定个小目标 1500[对啊我就是很菜qvq A. The Rank 难度:普及- n位学生 每个学生有四个分数 然鹅我们只需要知道他的分数和 按分数 ...
- 多IP加强SSH的安全性
本文针对一台服务器有多个网卡及IP地址的情况,可以限制某些IP不监听SSH,只允许通过某些IP来登陆 以下配置项在/etc/ssh/sshd_config文件中修改 比如你有4个网卡: eth0 – ...
- 【CodeChef】Querying on a Grid(分治,最短路)
[CodeChef]Querying on a Grid(分治,最短路) 题面 Vjudge CodeChef 题解 考虑分治处理这个问题,每次取一个\(mid\),对于\(mid\)上的三个点构建最 ...
- Equivalent Sets HDU - 3836 (Tarjan)
题目说给出一些子集,如果A是B的子集,B是A的子集,那么A和B就是相等的,然后给出n个集合m个关系,m个关系表示u是v的子集,问你最小再添加多少个关系可以让这n个集合都是相等的 如果这n个几个都是互相 ...
- 2018"百度之星"程序设计大赛 - 资格赛hdu6349三原色(最小生成树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6349 题目: 三原色图 Time Limit: 1500/1000 MS (Java/Others) ...
- jenkins自动打包部署项目
首先去jenkins的官网下载安装包 https://jenkins.io/ 个人下载是长期稳定的那个版本,下载后,得到一个.msi的安装包: 点击进行安装,然后一直点击下一步. jenkins会 ...
- Django(一)自定义web框架
https://www.cnblogs.com/yuanchenqi/articles/6083427.htm 一 什么是web框架 框架,即framework, 特指为解决一个开放性问题而设计的具有 ...
- Java IO流篇
什么是IO流 思考问题 如何读写文件? 解决--通过流读写文件 流是指一连串流动的字符,以先进先出传输信息的通道. Java操控硬盘上的文件,通过IO流来实现 Java流的分类 按流向区分 ---输出 ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
- phpstudy vhosts.conf 文件配置 记录下!
<VirtualHost _default_:80>DocumentRoot "D:\phpStudy\WWW" <Directory "D:\phpS ...