JSX语法基础总结

题记：首先我们要了解一下jsx是什么，跟js有什么区别，其实就是js的语法糖，加上了xml的语法，使得产生虚拟dom更加的方便，简单说一下，xml就是存储数据的格式，想了解xml的话，可以结合json格式相互对比。

举例：

//用js去写let Dom = React.creatElemnt('h1',{id:'header'},'你好啊');
let Doms = React.creatElemnt('h1',{id:'header'},React.craetElement('span',{id:'center'},"你好啊")//用jsX写
let Dom = (<h1 id='title'>你好</h1>
)let Doms = (<h1 id='title'><span>你好</span></h1>
)

jsx语法规则：

01.定义时无序引号。

let Doms = (<h1 id='title'><span>你好</span></h1>
)

02.标签中混入表达式用{}包裹。

      注：表达式跟代码语句不一样的欧，也就是说if语句，for语句不能被{}包裹；函数和变量是表达式，for和if叫做代码语句。

let name = 'title'
let commins = '你好'let Doms = (<h1 id={title}><span>{commins}</span></h1>
)

let name = 'title'
let commins = '你好'
let arr = ['a','b','c]
let Doms = (<div id={title}><span>{Array.map((item,index)=>{return <li key={index}>{item}</li>      )}</span></div>
)

 

03.样式的类型指定不用class，用className；

let name = 'title'
let commins = '你好'
let niu = 'niuniu'
let Doms = (<h1 id={title} className={niu}><span>{commins}</span></h1>
)

04.行内样式一样要加上{{}}；

let name = 'title'
let commins = '你好'let Doms = (<h1 id={title}><span style={{margin:20px}}>{commins}</span></h1>
)

05.根标签只有一个，跟Vue2一样；

06.标签必须闭合；

07.标签首字母

        1.若小写字母开头，将转为html标签；

        2.若大写字母开头，则会找相应的组件，如果没有这样的组件报错，结合Vue组件命名规范；