react中JSX使用

React.createElement()

react完全利用了js自身的能力来编写，而不像vue这种造轮子增强html的功能

JSX简介

JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到 < ,JSX就当做HTML解析，遇到 { 就当做javascript解析

JSX语法

<ul className="my-list">
    <li>JSPang.com</li>
    <li>I love React</li>
</ul>

代码

import React from 'react';
import ReactDOM from 'react-dom';

// 使用jsx创建元素
const title = <h1>hello,jsx</h1>
ReactDOM.render(
  title,
  document.getElementById('root')
);

为什么脚手架中可以直接使用JSX语法
为什么有这样的疑问：
JSX不是标准的ECMAScript语法，他是ECMAScript语法的扩展
需要babel这样的编译工具，编译之后才能在浏览器中正常运行

因为：
脚手架中已经有了该配置不用手动配置
这个包是: @babel/preset-react
使用注意点

属性名以驼峰命名
jsx与js更相似而不是html
class ==> className 类名的书写方式
for ==> htmlFor
jsx里单标签必须使用</>闭合
```
  <hr>
```

可以使用一个() 来包裹

  const element =(
    <div className="app">
    <div>1</div>
    <div>2</div>
    </div>
  )

嵌入js表达式

const sayHi = () => 'hi---'
const dv = <div>jsx自身也是一个表达式</div>
const name = '猫猫'
const title = <h1 className='title'>hello,{
    
    name} <span>{
    
    sayHi()}</span>{
    
    dv}</h1>

注意：
js对象不是一个合理表达式不能插入
插入表达式也不能是if或者for语句

JSX条件渲染

const isLoading = true

const loadData = ()=>{
    
    
  if(isLoading){
    
    
    return <div>loading....</div>
  }
  return <div>加载成功</div>
}
const title = (
  <div>
    条件渲染：
    {
    
    loadData()}
  </div>
)

ReactDOM.render(
  title,
  document.getElementById('root')
);

JSX列表渲染

const songs = [
  {
    
    id:1,name:'第1首'},
  {
    
    id:2,name:'第2首'},
  {
    
    id:3,name:'第3首'},
]
const title =(
  <ul>
    {
    
    songs.map(item => <li key={
    
    item.id}>{
    
    item.name}</li>)}
  </ul>
)
ReactDOM.render(
  title,
  document.getElementById('root')
);

JSX样式处理

行内样式 -style

  const title =(
    <h1 style={ {color:'red', backgroundColor:'skyblue'}}>
      jsx样式处理
    </h1>
  )

类名 -className (推荐)
可引入css文件
import ‘./css/index.css’

  const title =(
    <h1 className='title'>
      jsx样式处理
    </h1>
  )

React.createElement()

JSX简介

JSX条件渲染

JSX列表渲染

JSX样式处理

猜你喜欢