React入门：关于JSX语法二

而创建子元素可以直接交给JSX转化器

插图1

Javascript表达式

在JSX语法中写Javascript表达式只需要用{}即可，比如下面这个使用三目运算符的例子：JSX是HTML和JavaScript混写的语法，当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

插图2

属性表达式

子表达式

不过要注意的是，JSX语法只是语法糖，它的背后是调用ReactElement的构造方法React.createElement的，所以类似这样的写法是不可以的：

可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：

传播属性（Spread Attributes）

如果提前就知道了组件的属性的话，写起来很容易。例如component组件有两个动态的属性foo和bar：

而实际上，有些属性可能是后续添加的，我们没办法一开始就确定，我们可能会写出下面不好的代码：

这样写是错误的，因为我们手动直接添加的属性React后续没办法检查到属性类型错误，也就是说，当我们手动添加的属性发生类型错误时，在控制台是看不到错误信息的。

在React的设定中，初始化完props后，props是不可变的。改变props会引起无法想象的后果。

延伸属性

为了解决这个问题，React引入了属性延伸

这样就相当于：

当需要拓展我们的属性的时候，定义个一个属性对象，并通过{…props}的方式引入，在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。，React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的，不是手动添赋值的属性。

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

JSX 陷阱

style属性

在React中写行内样式时，要这样写，不能采用引号的书写方式

HTML转义

比如我们有一些内容是用户输入的富文本，从后台取到数据后展示在页面上，希望展示相应的样式

结果页面直接输出内容了：

React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以这么写：

参考资料

JSX in Depth

JSX Spread Attributes

If-Else in JSX

JSX Gotchas