react-jsx语法

React Jsx:

优点:

1: JSX语法执行更快,编译为Javascript代码时进行了优化

2: 类型更安全,编译过程如果出错就不编译

3: JSX编写模板更加简单快捷

注意:

1: JSX必须要有根节点

2: 正常的HTML元素要小写.如果大写会默认为组件

JSX表达式

1: 由Html元素构成

2: 中间如果需要插入变量用{}

3: {}中间可以使用表达式

4:{}中间表达式可以是JSX对象

5:属性和html内容一样都是用{}来插入内容

6:class为js保留关键字,一般用className

JSX_style && class'Name 样式

Style样式不支持直接写内联样式,支持传递对象

ClassName 多个类名时不会自动拼接(不可以同时存在多个className属性)

要想应用多个类名时可使用字符串拼接,也可以传递数组对象借助数组的方法组合类名

const classStr = "redBg"

let element1 = (

    <div>

        <h1 className={classStr+ " abc"}>helloworld</h1>

    </div>

)

const arr = ["abc","bcd"].join(" ")

let element1 = (

    <div>

        <h1 className={arr}>helloworld</h1>

    </div>

)

JSX注释: {/* 这里写注释 */}