jsx介绍

2.jsx介绍

JSX是JavaScript XML的简写表示了在JavaScrit代码中写XML（HTML）格式的代码.

优势：声明式语法更加直观，与HTML结构相同，降低学习成本，开发效率。

JSX是react的核心内容

jsx不是标准的js语法，是js的语法扩展，脚手架内置的@babel/plugin-transform-react-jsx包，用来解释该语法。

JSX使用步骤

1. 导入reactDom包
2. 使用jsx创建react元素
3. 将react元素渲染到页面中

核心代码：

import ReactDOM from 'react-dom'

// 创建元素
const title = <h1 title="哈哈"></h1>

// 渲染元素
ReactDOM.render(title, document.getElementById('root'))

JSX注意事项

• JSX必须要有一个根节点，如果没有根节点，可以使用<>、</>(幽灵节点) 或者<React.Fragment></React.Fragment>
• 所有标签必须结束，如果是单标签可以使用 />结束
• JSX中语法更接近JavaScript,属性名采用驼峰命名法。
  - class====> className
  - for =====> htmlFor
• JSX可以换行，如果JSX有多行，推荐使用（）包裹JSX，防止JS自动插入分号的bug。
• JSX的语法与html语法相比更加严格，更加接近js

JSX中使用JavaScript表达式

1.可以访问变量名

const name = 'zs'
const age = 18
const title = (
  <h1>
    姓名：{name}, 年龄：{age}
  </h1>
)

2.可以访问对象的属性

const car = {
  brand: '玛莎拉蒂'
}
const title = (
  <h1>
    汽车：{car.brand}
  </h1>
)

3.可以访问数组的下标

const friends=['张三','李四']
const title=(
  <h1>
      汽车：{friends[1]}
  </h1>
)

4.可以使用三元运算符

const gender=18
const title=(
  <h1>
     是否允许进入:{age>18?'是':'否'}
  </h1>
)

5.可以访问方法

function sayHi(){
  return '王饱饱'
}
const title=<h1>姓名:{sayHi()}</h1>

6. jsx本身

const span=<span>我是一个span</span>
const title=<h1>JSX 作为表达式：{span}</h1>

• jsx中可以出现任意的js表达式
• 在jsx中只能出现js表达式，不能出现js语句，比如 if、for、while
• jsx中不能出现语句，这会导致代码出现错误

条件渲染

1.通过if/else渲染

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

const title = <div>条件渲染：{loadData()}</div>

列表渲染

const songs=[
  {id:1,name:'痴心绝对'},
  {id:2,name:'像我这样的人'},
  {id:2,name:'南山南'}
]
const list=songs.map(song=>(<li>{song.name}</li>))
const dv={
  <div>
     <ul>{list}</ul>
  </div>
}

直接在JSX中渲染

const songs=[
  {id:1,name:'痴心绝对'},
  {id:2,name:'像我这样的人'},
  {id:2,name:'南山南'}
]
const dv={
  <div>
     <ul>{songs.map(song=><li>{song.name}</li>)}</ul>
  </div>
}

遍历时添加key属性

const dv=(
  <div>
    <ul>
       {songs.map(song=>(<li key={song.id}>{song.name}</li>))}
    </ul>
)

• 列表渲染时应该给重复渲染的元素添加key属性，key属性
  的值要保证唯一
• key值尽量避免使用index下边

样式处理

像width/height等属性，可以省略px，直接使用数值即可
如果是需要使用百分比的单位不变（60%）

1.行内样式-style

const dv=(
  <div style={ { color:'red',backgroundColor:'pink'} }>style样式</div>
)

2. 类名-className

import './base.css'
const dv=<div className="title">style样式</div>