JSX使用

前言：

JSX即javascript XML。不同vue的模板中写少量js脚本，JSX是在js中写html标签

一、JSX中的js表达式

语法：{js表达式}
eg：
const dom = <div>你好，我是{name}</div>

二、JSX的条件渲染

const sondom = () => {
    if (flag) {
        return <div>正确</div>
    } else {
        return <div>错误</div>
    }
}
const fatherdom = (
    <div>
        {sondom()}
    </div>
)

三、JSX的列表渲染

const listdom = (
    <ul>
        {list.forEach(item => <li>{item.name}</li>)}
    </ul>
)

四、JSX中使用行内样式

const dom = <div style={
   {color:'red',backgroundColor:'blue'}}></div>

五、JSX中使用类名

在js中引入样式文件
import '../../css/index.css'

index.css中
.la-title{...}

const dom = <div className="la-title"></div>