React JSX语法

JSX是什么？

JSX(JavaScript XML),React定义的一种类似XML的JS扩展语法。
JSX是React生成虚拟DOM得一种js扩展语法

在使用JSX定义虚拟DOM时不可使用引号

const VDOM = (
    

        hello JSX
    
)

JSX中混入不确定属性或者表达式需要使用{ }

const myId = 'myId'
const myData = 'myData'
const VDOM = (
    

        {myData.toLocaleLowerCase()}
    
)

image.png

样式类名指定需用className

class为ES6中定义类的关键词,为规避所以React中用className来代替

const myId = 'myId'
const myData = 'myData'
const VDOM = (
    

        {myData.toLocaleLowerCase()}
    
)

image.png

内联样式需使用style={{key:value}}来定义

多单词属性需使用小驼峰写法

const VDOM = (
    

        {myData.toLocaleLowerCase()}
    
)

image.png

虚拟DOM只有一个根标签

const myId = 'myId'
const myData = 'myData'
const VDOM = (
    

        

            {myData.toLocaleLowerCase()}
        
        
    
)

JSX标签必须闭合

非成对标签可自闭合也可以

const myId = 'myId'
const myData = 'myData'
const VDOM = (
    

        

            {myData.toLocaleLowerCase()}
        
        
    
)

image.png

标签首字母

1.若小写字母开头，则转为html中同名元素，若html无该同名元素则报错。
2.若大写字母开头,则渲染对应组件,若组件没有定义则报错。

const myId = 'myId'
const myData = 'myData'
const VDOM = (
    

        

            {myData.toLocaleLowerCase()}
        
        
        组件
    
)

基本规则概括

1.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2.遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

总结实例