总结下关于使用React中的JSX的一些细节

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()},调用函数+括号执行函数