jsx的细节
最近在学react,而react的核心概念是万物皆js,而为了使用这个概念,react引入了jsx,将html的标签结合进js中
jsx的书写规范
JSX的顶层只能有一个根元素
所以我们很多时候会在外层包裹一个div原生,我经常使用vue 的template,这点和template很像,最外层只能存在一个标签.(但是这点在vue3中改变了,vue3 的template我测试了下,可以放好几个标签,不用在最外层包裹一个)
jsx可以使用括号()来换行
下图中的return里放进去的是html标签,但是使用了括号进行包裹来换行
JSX中的标签可以是单标签，也可以是双标签；
这点和vue不同,vue的组件好像不能使用单标签.但是注意react使用单标签必须以/结尾
jsx中的注释
jsx的注释和html /css /js 中的注释有所不同,他使用{ }符号进行包裹,再使用/* 这里添加注释*/进行注释.
jsx嵌入变量
jsx使用{}嵌入变量
当变量是Number、String、Array类型时，可以直接显示
Array会被转换成一行文字
当变量是null、undefined、Boolean类型时，内容为空；
如果需要显示这些,可以将他们转换成字符串,比如toString方法,或者 + 空字符串(js自动转换成字符串).
不可以直接嵌入对象
下图中,直接嵌入了一个对象obj,浏览器直接报错(但是将对象中的值嵌入是可以的)
jsx还可以嵌入表达式
可以使用加减乘除
{}中可以进行加减乘除运算.比如最简单的字符串拼接
可以使用三元运算符
{}中是使用 xx ? yy : zz ,意味是否为xx?是的话使用yy,否使用zz
可以使用函数表达式
{}中调用函数,比如{this.add()},调用函数+括号执行函数