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必须要有一个根节点,如果没有根节点,可以使用<>、(幽灵节点) 或者
  • 所有标签必须结束,如果是单标签可以使用 />结束
  • 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>
)
  1. 类名-className
import './base.css'
const dv=<div className="title">style样式</div>

你可能感兴趣的:(react,react.js,javascript,前端)