JSX基本使用

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 = （
    
Hello World!!
）

//渲染 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 = (
 
我是：{ name }
)

JSX 中使用 javascript 的注意点

• 单括号中可以使用任意的 javascript 表达式---也可以直接写一些简单（字符串、三元运算符等等）

• JSX 自身也是 JS 表达式

• JS 中对象一般只有作为 style 属性出现的时候才是合法的，不然直接在 JSX 中使用对象写法会报错

• 不能在 {} 中出现语句（例如：if/for等）

JSX条件渲染

场景：进行一些过渡加载效果时进行判断

 使用：主要通过 if/else 、三元运算符、逻辑与来实现

基本使用：

const isLoading = true;
const loading = () => {
  return isLoading ? (
加载中...
) : (
加载完成
)
}
const title = (
  

    条件渲染：
    { loading() }
  
)

JSX列表渲染

方法：使用数组的 map() 方法进行列表渲染

注意：列表渲染时，需要添加 key() 属性，key值要唯一，且尽量避免使用索引号为 key

基本使用：

// 列表渲染
const song = [
  {id : 1, name : '幻听'},
  {id : 2, name : '山水之间'},
  {id : 3, name : '宇宙之大'},
]

const title = (
  

    { song.map(item => 
{item.name}
) }
  
)

JSX样式处理

• 行内样式---style

// 行内样式
const title = (
  

    样式处理
  
)

• 类名----className

// 类名
// 引入css文件
import './index.css'
// 使用css文件中的元素样式
const title = (
  

    样式处理
  
)