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 = （
    <h1>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 = (
 <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>
)