React中的JSX  { }的使用详解.docxVIP

第

React中的JSX??{?}的使用详解

目录JSX概述1.在JSX中使用{}2.在JSX中嵌套标签3.{}中的样式和事件处理4.在JSX中使用语句

JSX概述

由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。

React不一定非要使用JSX，但它有以下优点：JSX执行更快，因为它在编译为JavaScript代码后进行了优化它是类型安全的，在编译过程中就能发现错误声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速度JSX语法：定义虚拟DOM时，不要用引号标签中混入js表达式时要用{}样式的类名指定不要用class，要用className内联样式，要用开始本文正文，下面看下React中的JSX{}的使用，具体内容如下所示：

在做react开发的时候，我们知道最后要通过render方法来将React元素挂载到真实的DOM上。而创建一个React元素，可以通过两种方式创建。

（1）通过JSX方式

（2）通过React.createElement()方法创建

而JSX的方式，最终也会被babel转换，变成通过React.createElement()方法进行创建。

之所以这样子，是因为JSX能够很大程度的方便开发，可以少写很多代码。

而本篇文章就是讲解一下如何在React中使用JSX。

1.在JSX中使用{}

例如当我们通过JSX创建一个React元素：

leta=1

constdiv=div/div

而在这个div中想使用变量a，我们就可以通过{}来对变量进行引入。

（1）引入变量

constdiv=div{a}/div//变量

当然，除了引入变量这种，还有很多中方式可以在{}中进行编写。

（2）引入对象属性

letempty={

a:1,

b:2

constdiv=div{empty.a}/div//对象属性

（3）引入计算表达式

constdiv=div{empty.a+empty.b}/div//计算表达式

（4）引入函数

constfn=()={

return2

constdiv=div{fn()}/div//函数

（5）引入逻辑表达式

constdiv=div{fn()===21:2}/div//逻辑表达式

（6）引入数组

constdiv=div{[1,2,3,4,5]}/div//数组

OK，除了上面写在大括号里的，还有几种数据类型没有引入。这里需要注意，大括号里虽然可以解析数组，但是不能解析对象（有一种特例后面会说）。

如果在大括号里面放入了对象，那么React就会报错。

同样的，如果在大括号里的是一个方法，也会报错（也有一种特例）。

如果在{}里面，引入了布尔类型，undefined，null这三种数据类型。React虽然不会报错，但是并不会渲染到真实DOM上。

2.在JSX中嵌套标签

在正常的HTML里面，标签是可以任意嵌套的。如果在React中，可以看下面的代码：

classEmextendsReact.Component{

render(){

returndiv/div

constdiv=(div

p123/p

/Em

/div)

通过上面的方式，是没办法实现出想要的效果的。因为它不符合JSX的使用规范，对于Em组件，是没有收到p标签的，所以也不会对它进行展示。

正确写法如下：

classEmextendsReact.Component{

render(){

returndiv{ps.children}/div

constdiv=(div

p123/p

/Em

/div)

这种方式，主要是通过props.children拿到了P标签，并且在Em组件里面渲染。

说到这里，可以说一下另一个用到{}的地方，当我们给React组件绑定属性的时候，可以通过的方式：

letpro