React 学习02 - JSX 的基本使用

最新推荐文章于 2021-05-25 14:43:02 发布

大魔王sama

最新推荐文章于 2021-05-25 14:43:02 发布

阅读量289

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq_40311523/article/details/107486631

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用 React 时，在引入了相关 JS 文件之后，通常要做两个步骤：

创建虚拟 DOM
引入虚拟 DOM（将虚拟 DOM 渲染到目标节点中）

其中，JSX 语法是为了让我们更方便的执行第一步，那么在使用 JSX 之前，我们先来看一下原始方式是如何创建虚拟 DOM 的。

原始方式创建虚拟 DOM

利用原始方式，需要用到 React.createElement() 方法，要指定一些参数：

第一个参数：标签名
第二个参数：标签属性对象
第三个参数：标签中的内容

例如：

let vDom = React.createElement('div', {id: 'app'}, 'Hello World')

注意：利用原始方式，不需要使用 babel ，所以 script 标签 type 为 text/javascript

JSX

JSX 中有一些语法规则，在解析过程中，如果遇到 < ，就按照 HTML 语法解析，如果遇到 { ，就按照 JS 语法解析。

注释

在 JSX 中使用注释比较特殊，注释的内容要放在 {/* */} 之间，例如：

let myDOM_0 = <div>{/* 我是注释 */}</div>

多个标签

JSX 中多行标签，需要有一个父元素包裹。另外，如果发生换行，建议使用 () 包裹，例如：

// let myDOM_1 = <div>我是第一个div</div><div>我是第二个div</div> // 报错
let myDOM_1 = (<div>
  <div>我是第一个div</div>
  <div>我是第二个div</div>
</div>)

表达式

JSX 表达式，如果想在 JSX 中使用表达式，那么我们就需要将表达式放入一对 {} 中，例如：

let text = 'hello world'
let num = 5
let sayHello = user => `我是${user.name}，今年${user.age}`

let myDOM_2 = (<div>
  {/* 展示 */}
  <div>{text}</div>
  {/* 计算 */}
  <div>{num++}</div>
  {/* 调用函数 */}
  <div>你好，{sayHello({ name: '张三', age: 13 })}</div>
  {/* 三目运算 */}
  <div>根据num输出flag --- flag：{num > 2 ? 'OK' : 'NOT'}</div>
</div>)

给标签设置属性

JSX 中一般属性就用表达式（ {} ）来表示：

let url = 'http://www.baidu.com'
let myDOM_4 = <a href={url}>百度</a>

但是 style 和 class 属性比较特殊，设置 style 属性，要注意 style 必须为对象格式，例如：

let style = { width: '100px', height: '100px', backgroundColor: 'red' }
let myDOM_5 = <div style={style}></div>

设置 class 属性的时候要注意，因为虚拟 DOM 是用 JS 来表示的，在 JS 中，class 是一个关键字，所以在标签上的属性不能叫 class，我们要用 className 来替代它，例如：

let myDOM_6 = <div className="bgc size"></div>