React学习【2】JSX简单介绍

React JSX

优点：

1. JSX执行更快，编译为JS代码时进行优化
2. 类型更安全，编译过程如果出错不能编译，及时发现错误

注意：

1. JSX必须要有根节点。
2. 正常的普通HTML元素要小写。如果是大写，默认认为是组件。

JSX表达式

<h2>{1+1}</h2>

let time = new Date().toLocaleTimeString()
let str = '当前时间是:'
<h2>{str+time}</h2>

<div>
        <h1>今天是否隔离</h1>
        <h2>{man=="发热"?<button>隔离</button>:"躺床上"}</h2>
</div>

都可以编译成功。

let element3=(
    <div>
        <span>横着躺</span>
        <span>竖着躺</span>
    </div>
)

let element2=(
    <div>
        <h1>今天是否隔离</h1>
        <h2>{man=="发热"?<button>隔离</button>:element3}</h2>
    </div>
)

使用css样式：

let color = 'bgRed'
let element4 =(
//最好使用className，因为class在js里是关键词
    <div className={color}>
        红色的背景颜色
    </div>
)

总结：

• 由HTML元素构成
• 中间如果需要插入变量用{}
• {}中间可以使用表达式
• {}中间表达式中可以使用JSX对象
• 属性和HTML内容一样都是用{}来插入内容