而创建子元素可以直接交给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攻击，如果要不转义，可以这么写：
参考资料
网友评论