JSX基本使用
JSX: JavaScript XML的简写。就是一种在 JavaScript 中编写 XML(HTML) 格式的代码。
优势: 声明式语法更加直观,和HTML 结构相同,减低学习成本。提高开发效率。
基本使用:
//前提:使用react 脚手架进行项目初始化(npx create-react-app my-app)
// 1.导入react
import React from 'react'
import ReactDOM from 'react-dom
//使用JSX 进行 react 元素的创建
const title = (
<h1>Hello World!!</h1>
)
//渲染 react 元素
ReactDOM.render(title, document.getElementById('root'))
JSX注意点:
-
React元素的属性名使用驼峰命名法
-
特殊的属性名:(HTML --> XML)
- class --> className 、 for -->htmlFor 、 tabindex --> tabIndex
-
没有子节点的 react 元素可以使用单标签进行表示 < />
-
推荐使用 小括号 包含 JSX,从而避免 JS 中的自动插入分号陷阱
JSX 中使用 javascript
语法:{ javascript表达式 } ----- (类似于插值语法)
const name = '小宝'
const title = (
<div>我是:{ name }</div>
)
JSX 中使用 javascript 的注意点
-
单括号中可以使用任意的 javascript 表达式---也可以直接写一些简单(字符串、三元运算符等等)
-
JSX 自身也是 JS 表达式
-
JS 中对象一般只有作为 style 属性出现的时候才是合法的,不然直接在 JSX 中使用对象写法会报错
-
不能在 {} 中出现语句(例如:if/for等)
JSX条件渲染
场景:进行一些过渡加载效果时进行判断
使用:主要通过 if/else 、三元运算符、逻辑与来实现
基本使用:
const isLoading = true;
const loading = () => {
return isLoading ? (<h1>加载中...</h1>) : (<div>加载完成</div>)
}
const title = (
<h1>
条件渲染:
{ loading() }
</h1>
)
JSX列表渲染
方法:使用数组的 map() 方法进行列表渲染
注意:列表渲染时,需要添加 key() 属性,key值要唯一,且尽量避免使用索引号为 key
基本使用:
// 列表渲染
const song = [
{id : 1, name : '幻听'},
{id : 2, name : '山水之间'},
{id : 3, name : '宇宙之大'},
]
const title = (
<ul>
{ song.map(item => <li key = {item.id}>{item.name}</li>) }
</ul>
)
JSX样式处理
- 行内样式---style
// 行内样式
const title = (
<h1 style={
{color : 'red', fontSize : '30px'}}>
样式处理
</h1>
)
- 类名----className
// 类名
// 引入css文件
import './index.css'
// 使用css文件中的元素样式
const title = (
<h1 className='title'>
样式处理
</h1>
)