JSX
Posted endymion
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSX相关的知识,希望对你有一定的参考价值。
Babel的作用
把不是ES5的代码转换成ES5的代码,是一个javascript编译器。
代码在浏览器中运行之后会生成一个js对象,含有两个属性:type
和children
。然后读取type
属性值,通过DOM操作添加元素。
这个js对象就是传说中的virtual DOM
。
为什么要引入React
因为babel将JSX代码转换成js代码后,需要用到React。
JSX的使用
- 将表达式放到花括号中;
- 并列标签必须要被一个爸爸(div)包住,不想要爸爸的话,可以找一个假的爸爸:import导入Fragment,使用
<Fragment><Fragment/>
包住并列的孩子们; - 一个花括号代表着表达式;
- 两个花括号才表示对象;
- 行内样式要这样写:
style = {{}}
; - 行内样式中,比如
font-size
要写成fontSize
(即驼峰式); - 行内属性中
class
属性不能用,要用className
。但是id还是可以照常使用的;
以上是关于JSX的主要内容,如果未能解决你的问题,请参考以下文章