题记:首先我们要了解一下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>
)