JSX

1.JSX列表渲染

目标: 掌握在JSX中渲染列表的方式

JSX 中的数组自动展开特性
在JSX中使用map方法进行列表渲染

JSX中的数组自动展开的特性

在JSX中,可以将数组直接放入插值表达式,数组将会被自动展开,数组中的元素会被直接渲染到该位置

const array = ["list-item1","list-item2","list-item3"]

const jsx = <div>{array}</div>

const jsxAry = [
  <li>list-item1</li>
  <li>list-item2</li>
  <li>list-item3</li>
]

const jsx = <ul>{jsxAry}</ul>

⚠️注意不能直接将对象数组嵌入到JSX中,因为当数组被自动展开后JSX不知道要如何进行渲染对象

const arrayObject = [
  {name:"list-item1"},
  {name:"list-item2"},
  {name:"list-item3"},
]

在jsx中使用map方法进行列表渲染

//1.普通数据数组
const data = [
  {id:1,name:"list-item1"},
  {id:2,name:"list-item2"},
  {id:3,name:"list-item3"},
]

//2.被转换后的jsx数组
// [<li>list-item1</li>,<li>list-item2</li>,<li>list-item3</li>]
const jsx = data.map((item) => <li key={item.id}>{item.name}</li>)

//3.利用jsx中的数组自动展开特性渲染JSX数组
let jsx = <ul>{jsxData}</ul>;

//在进行列表渲染时,列表中的每一项必须要有key属性,并且属性值在当前循环中必须是唯一的,它用于帮助React内部提升列表渲染的性能
//尽量不要使用循环索引作为key属性的值,在一些特殊场景下并不能帮助React提升列表渲染性能,比如动态拖拽列表元素更改列表项顺序时
//key 属性在DOM结构中是看不见的

2.JSX元素样式

目标: 掌握如何为元素添加行内样式,掌握如何为元素添加样式表样式

通过style属性为元素添加行内样式
通过className属性为元素添加样式表中的样式(全局样式)
通过className属性为元素添加样式表中的样式(组件级样式)
通过classnames 第三方库为元素动态设置类名

通过style属性为元素添加行内样式

const styles = {
  width:200,
  height:200,
  backgroundColor:"skyblue",
  fontSize:24,
}
//style属性接受对象作为参数,对象属性为样式名称,对象值为样式值,
//样式名称采用小驼峰命名法
//如果样式值的单位是像素,可以省略,其他单位需要手动添加
const jsx = <div style={styles}></div>

通过className 属性为元素添加样式表中的样式(全局样式)

/* src/styles.css */
.box {
  width:100px;
  height:200px;
  background:Pink
}

//导入样式表
import "./styles.css"
//通过 className 属性为元素添加样式表中的样式
const jsx = <div className="box"></div>

//如果类名需要动态的被添加和删除可以在JSX中嵌入三元表达式
const isActive = true
const jsx = <div className={isActive? "active" : ""}></div>

通过className属性为元素添加样式表中的样式(组件级样式)

/* App.module.css */
.red {
  color:red;
}
/* 这个是全局样式在局部样式里面,不推荐这么写,除非使用了一些样式，可以进行覆盖 */
:global html {
  height: 100%;
}

import styles from "./App.module.css"
import { Component } from "react";
export default class App extends Component {
  render() {
    return <div className=></div>
  }
}

使用这个组件

import App from "./App"
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App></App>)

通过classnames 第三方库为元素动态设置类名

brainstorm:🤔,如果一个元素有多个类名需要根据不同的条件进行动态设置怎么办？

解决：通过第三方库classnames 实现className属性为元素动态绑定任意个类名

# 下载 classnames 第三方库
npm install classnames

// 注意: classNames 方法的参数个数没有限制, 且参数形式可以是字符串也可以是对象
className={classNames('foo',{bar:true})} // => "foo bar"

//导入classNames 方法,用于动态元素设置类名
import classNames from "classnames"
//通过classNames方法为动态元素设置类名
const isCompleted = true
const jsx = <div className={classNames("box",{completed:isCompleted})}></div>

3.插入本地图片

目标: 掌握在React应用中插入本地图片的方法

import logo from "./assets/imges/logo.png"

export default class App extends React.Component {
  render() {
    return <img src={logo} alt="" />
  }
}

export default class App extends React.Component {
  render() {
    return <img src={require("./assets/images/logo.png")} alt="" />
  }
}

export default class App extends React.Component {
  render() {
    return (<img src={`${process.env.PUBLIC_URL}`}/assets/images/logo.png /><);
  }
}

4.小总结

描述在 JSX 中实现列表渲染的思路
- 在JSX中将数据数组转换成为JSX数组(map)
- 将 jsx数组放入{}中
描述创建类组件的方式
- 通过class 关键字声明类
- 让组件类继承 Component 类
- 在组件类中通过render方法视图
- 使用标记的方式渲染组件
描述实现组件级样式的方式
- 创建组件对应的样式表,文件名称就是你所创建的组件的 名称+.module.css
- import styles from "./App.module.css"
- <div className={styles.red}></div>
元素添加行内样式有哪些注意点
- Style 属性的值为对象
- 对象中的样式名称如果由多个单词组成需要使用驼峰式命名法
- 如果样式值的单位是像素,可以省略px
如何导入全局样式
- 样式表名称没有特殊要求
- 直接在应用中导入即可import "styles.css"
如何在 React 中插入本地图片
1. import
2. require
3. process.env.PUBLIC_URL

React 基础系列(4)

JSX

1.JSX列表渲染

2.JSX元素样式

3.插入本地图片

4.小总结