前言

今天一起看看JSX中的条件渲染和列表渲染，来看看语法上与vue有什么异同，再来看看JSX中的样式是如何处理的。

一、JSX条件渲染

1. 简介

根据不同条件渲染不同的 JSX 结构

2. 典型场景

Ajax异步请求数据中的loading效果

注：虽然在JSX中无法直接写if/else判断，但是可以嵌入函数表达式在函数表达式中进行if/else判断

3. 代码实现

可以在函数表达式中使用if/else或者三元运算符来实现代码如下（示例）：

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

二、JSX列表渲染

1. 结构转换

在这里插入图片描述

2. 代码演示

使用数组的方法：Array.prototype.map() 代码如下（示例）：

const list = (
  <ul>
    {books.map(item => <li>{item.name}</li>)}
  </ul>
)

三、JSX样式处理

1. 行内样式——style

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
	JSX的样式处理
</h1>

2. 类名 —— className（推荐）

需要使用 import '样式文件路径/样式文件名称.css'导入样式文件 ,title类在xxx.css文件中定义好

<h1 className="title">
	JSX的样式处理
</h1>

总结

1. JSX 是React 的核心内容
2. JSX 表示在JS代码中写HTML结构，是React声明式的体现
3. 使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染，可以描述任意 UI 结构
4. 推荐使用 className 的方式给JSX添加样式

JSX渲染及样式处理

前言