美文网首页
JSX简单介绍与举例

JSX简单介绍与举例

作者: 热衷划水张小福 | 来源:发表于2018-09-17 16:44 被阅读0次

const  element =  <h1>Hello,world!</h1>;


这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。

它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言,但事实上它完全是在 JavaScript 内部实现的。

JSX 用来声明 React 当中的元素。

在 JSX 中使用表达式

你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。

例如 2 + 2, user.firstName, 以及 formatName(user) 都是可以使用的。如:

JSX 本身其实也是一种表达式

在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象。

这也就意味着,你其实可以在 if 或者 for 语句里使用 JSX,将它赋值给变量,当作参数传入,作为返回值都可以:

JSX 属性

你可以使用引号来定义以字符串为值的属性:

也可以在使用大括号来定义以JavaScript表达式为值的属性:

切记在使用大括号包裹JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。

JSX 嵌套

如果 JSX 标签是闭合式的,那么你需要在结尾处用 />, 就好像 XML/HTML 一样:

JSX 标签同样可以相互嵌套:

警告:

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称。

例如,class 变成了 className,而 tabindex 则对应着 tabIndex


JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。下面两种代码的作用是完全相同的:

React.createElement() 这个方法首先会进行一些避免bug的检查,之后会返回一个类似下面例子的对象:

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

相关文章

  • JSX简单介绍与举例

    const element = Hello,world! ; 这种看起来可能有些奇怪的标签语法既不是字符串也不是...

  • JSX介绍

    考虑下面的变量声明: 这个有趣的标记语法既不是字符串也不是HTML。 他被称为JSX,是一种JavaScript的...

  • 介绍JSX

    本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于Z.MJun的简书 ,感谢!<翻译不容易啊> 翻译于2017年6...

  • mongo回顾(八:聚合查询二)

    上一篇简单的介绍了mongo的聚合查询,并举例了match与lookup的使用,今天的话继续介绍聚合查询与Mong...

  • 2.0 Introducing JSX 介绍JSX

    Consider this variable declaration: 考虑这个变量声明: const eleme...

  • React-1.JSX

    1、JSX的介绍 什么是JSX:JSX=javascript xml就是Javascript和XML结合的一种格式...

  • jsx(1)-介绍

    什么是jsx JSX其实是嵌入到JavaScript中的一种结构语法; babel会将 转换成React.cre...

  • 2020 动手写个 react (2)

    我们写一段 jsx ,有关 jsx 语法这里暂不做过介绍,留下伏笔 然后将上面 jsx 通过 babel 转换为 ...

  • LevelDB:使用介绍

    LevelDB 提供的接口其实很简单,下面举例进行简单说明。 例子 这个例子简单介绍了 LevelDB 的基本用法...

  • 【iOS】 CocoaPods 的基本使用

    上一篇介绍了如何安装CocoaPods,接下来就简单介绍CocoaPods的基本使用。 举例介绍:比如给Miai项...

网友评论

      本文标题:JSX简单介绍与举例

      本文链接:https://www.haomeiwen.com/subject/wgwlnftx.html