react笔记（二）—— jsx使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章react笔记（一）—— 基本介绍中，我们学习了react的介绍、特点、react 脚手架的使用、基本使用、jsx的基本介绍以及为什么需要使用jsx。那么在这篇文章中，我们将学习到jsx使用步骤、注意事项、jsx中使用javascript表达式、条件渲染、列表渲染、样式处理等相关知识点。

jsx使用步骤

在上篇文章中，我们学习了jsx的基本介绍和优势，那么我们在react项目中该如何使用jsx呢？

使用jsx步骤：

导入reactDOM包
使用jsx创建react元素
将react元素渲染到页面中

import ReactDOM from 'react-dom'

// 创建元素
const title = <h1 title="哈哈"></h1>

// 渲染元素
ReactDOM.render(title, document.getElementById('root'))

需要注意的是，react17版本之后，使用jsx不需要额外导入React。

jsx注意事项

jsx的语法相比html的语法更加严格，更加接近js。在使用jsx时需要注意的事项有

JSX必须要有一个根节点，如果没有根节点，可以使用<></>或者<React.Fragment></React.Fragment>
所有标签必须结束，如果是单标签可以使用/>结束
JSX中语法更接近与JavaScript
- class => className
- for====> htmlFor
JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止自动插入分号的bug

jsx中使用javascript表达式

JS 表达式是数据类型和运算符的组合，可以单独出现数据类型，也可以数据类型+运算符的组合。它的特点是有值或者说能够计算出一个值。在jsx中使用表达式语法：{ JS 表达式 }。需要注意的是，jsx中可以出现任意的js表达式。在jsx中只能出现js表达式，不能出现js语句，比如if、for、while等

const name = 'zs'
const age = 18
const title = (
  <h1>
    姓名：{name}, 年龄：{age}
  </h1>
)

可以访问对象的属性。

const car = {
    brand: '玛莎拉蒂'
}
const title = (
  <h1>
    汽车：{car.brand}
  </h1>
)

可以访问数组的下标。

const friends = ['张三', '李四']
const title = (
  <h1>
    汽车：{friends[1]}
  </h1>
)

可以使用三元运算符。

const gender = 18
const title = (
  <h1>
    性别：{age >= 18? '是':'否'}
  </h1>
)

可以调用方法。

function sayHi() {
  return '你好'
}
const title = <h1>姓名：{sayHi()}</h1>

JSX本身。

const span = <span>我是一个span</span>
const title = <h1>盒子{span}</h1>

JSX中的注释

{/* 这是jsx中的注释 */}   推荐快键键 ctrl + /

条件渲染

在react中，一切都是javascript，所以条件渲染完全是通过js来控制的。可以使用if/else或三元运算符或逻辑与(&&)运算符。

通过判断if/else控制。

const isLoding = false
const loadData = () => {
  if (isLoding) {
    return <div>数据加载中.....</div>
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}

const title = <div>条件渲染：{loadData()}</div>

通过三元运算符控制。

const isLoding = false
const loadData = () => {
  return isLoding ? (
    <div>数据加载中.....</div>
  ) : (
    <div>数据加载完成，此处显示加载后的数据</div>
  )
}

逻辑运算符。

const isLoding = false
const loadData = () => {
  return isLoding && <div>加载中...</div>
}

const title = <div>条件渲染：{loadData()}</div>

列表渲染

react中通过数组的map方法来实现列表的渲染。同时，需要为遍历项添加 key 属性。key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用的。key 在当前列表中要唯一。如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值。如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值。

列表的渲染。

const songs = ['温柔', '倔强', '私奔到月球']

const list = songs.map(song => <li>{song}</li>)

const dv = (
  <div>
    <ul>{list}</ul>
  </div>
)

直接在JSX中渲染。

const songs = ['温柔', '倔强', '私奔到月球']

const dv = (
  <div>
    <ul>{songs.map(song => <li>{song}</li>)}</ul>
  </div>
)

key属性的使用。

const dv = (
  <div>
    <ul>
      {songs.map(song => (
        <li key={song}>{song}</li>
      ))}
    </ul>
  </div>
)

样式处理

在jsx中通过style和className控制元素的样式。

行内样式 - style

像 width/height 等属性，可以省略 px，直接使用数值即可
如果是需要使用百分比的单位，此时，继续使用字符串的值即可（比如，"60%"）

const dv = (
  <div style={{ color: 'red', backgroundColor: 'pink' }}>style样式</div>
)

类名 - className【推荐】

// 导入样式
import './base.css'
const dv = <div className="title">style样式</div>