jsx语法

简介

JSX是基于 JavaScript + XML 的一个扩展语法。

这种语法最先在React中使用。

使用

1、使用JavaScript表达式，写在花括号{}中

2、添加自定义属性用data-前缀

踩坑

1、由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor

2、组件名必须大写

3、事件必须修正this指针，且绑定事件名时要使用小驼峰的写法onclick必须写成onClick

4、所有的标签都必须闭合，如：<br>不行，必须写为<br/>

5、注释

{/*注释......*/}
{
	//jsx单行注释
}

6、样式：行内样式（推荐使用），写在花括号中

7、JSX语法最外层必须有一个元素包裹，否则不行

// 这样写是错误的
return (
    <p></p>
    <span></span>
)

如果不想加额外的元素，可以Fragment官方提供的占位符

import React, { Component, Fragment } from 'react'
class App extends Component{
    render (){
        return (
            <Fragment>
                <p></p>
                <span></span>
            </Fragment>
        )
    }
}
export default App

8、不可以使用 if else 语句，可以使用三元表达式来替代

注意: 在JSX中不支持语句写法(if语句, for循环, while)

输出数据类型：字符串,数字原样输出。布尔值,空,未定义直接不输出。

允许在模板中插入数组，数组会自动展开所有成员。

慢慢积累中，有不正确的可以指出来。