react学习-JSX（二）

xiaoxiao

2022 年 06 月 18 日

855 次浏览

暂无评论

2185字数

react 前端

# react学习-JSX（二）

## 一、JSX是什么？

概念：JSX是 javascript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 的结构

作用：在 React 中创建 HTML 结构

## 二、JSX表达式

**语法：{ js 表达式 }**

与 Vue 的插值表达式非常相似

**可以使用的表达式**

1. 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
2. 1 + 2、'abc'.split('')、['a', 'b'].join('-')
3. function

4. 使用常规的变量

```js
const name = 'xxhzm'
<h1>{ name }</h1>
```

2. 使用 function

```js
const getAge = () => {
  return 16
}
```

3. 使用一个三元运算符

```js
const flag = true
{ flag ? '真棒' : '真菜'  }
```

**注：if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 `{}` 中！！**

## 三、JSX列表渲染

在 vue 中使用 v-for 这个指令来进行渲染，但是 react 中没有指令。那react 如何实现呢？

在 react 中使用列表渲染需要使用原生的 map 方法

```js
const list = [
  { id: 1, name: '奔驰' },
  { id: 1, name: '宝马' },
  { id: 1, name: '奥迪' },
]

{ list.map(item => <li>{ item.name }</li>) }
```

我们需要渲染哪一个内容就 return 谁

在 vue 中使用 v-for 渲染的时候需要添加一个 key，那 react 呢？

我们可以直接在遍历的标签上添加一个 key 属性，提供 diff 性能

```js
{ list.map(item => <li key={ item.id } >{ item.name }</li>) }
```

**注：我们在标签上添加的 key 属性仅仅在 react 内部中使用，不会出现在真实的 DOM 结构中**

## 四、JSX条件渲染

在 vue 中我们可以使用 v-if v-else v-show，上面已经说过了 react 中没有指令，那么如何进行实现呢？

1. 使用三元表达式 - 满足条件渲染 span 标签

```js
   const flag = true
   { flag ? <span>hello world</span> : null }
   ```

如何模板结构很复杂呢？

我们可以使用()来将模板内容包裹起来，在()中换行什么的都没有问题

```js
   { flag ? (
   <div>
   	<span>hello world</span>
   </div>
   : null }
   ```

2. 使用 逻辑与(&&) 逻辑或(||) 运算符

```js
   const flag = false
   
   { flag && <span>hello world</span> }
   { flag || <span>Hi</span> }
   ```

## 五、JSX样式处理

1. 行内样式

在写行内样式时我们直接在标签上添加一个 style 属性即可

```js
   <span style={{ color: 'red', fontSize: '30px' }}>hello world</span>
   ```

也可以写成

```js
   const style = {
     color: 'red', 
     fontSize: '30px'
   }
   
   <span style={ style }>hello world</span>
   ```

2. 类名样式

在元素上直接绑定一个 className 属性即可

```
   app.css：
   .active {
     color: skyblue;
     font-size: 30px
   }
   
   app.js：
   import './app.css'
   <span className='active'></span>
   
   ```

3. 动态类名样式

```js
   const activeFlag = false
   
   <span className={ activeFlag ? 'active' : '' }>hello world</span>
   ```

## 六、JSX注意事项

1. JSX必须有一个根节点，如果没有根节点，可以使用`<></>`（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法  `class -> className`  `for -> htmlFor`
4. JSX支持多行（换行），如果需要换行，需使用`()` 包裹，防止bug出现