React --- jsx语法规则

标签：--- const tolowerCase myData 标签 React jsx VDOM

jsx 语法规则：
1、定义虚拟dom时，不要写引号
//创建虚拟DOM
 1 const VDOM = <h1><span>hello，react</span></h1> 
2、标签中混入JS表达式时要用{}

1 //定义属性和标签内容
2 const myId = 'aTGuigu';
3 const myData = 'hello,REacT';
4 //创建虚拟DOM
5 const VDOM = 
　(<h1 id={myId.toLowerCase()}>
   　　<span>{myData.tolowerCase}</span>
　　</h1>)

3、样式的类名指定不要用 class 要用className

1 .title{
2 width:200px;
3 background-color:orange;
4 }
5 const VDOM =
6 (<h1 className="title" id={myId.toLowerCase()}>
7 <span>{myData.tolowerCase}</span>
8 </h1>)

 

4、内联样式要用，style={{key:value}}的形式去写

const VDOM =
(<h1 className="title" id={myId.toLowerCase()}>
<span style={{color:"white",fontSize:'29px'}}>{myData.tolowerCase}</span>
</h1>)

 

5、只有一个根标签

const VDOM =
(
<div>
<h1 className="title" id={myId.toLowerCase()}>
<span style={{color:"white",fontSize:'29px'}}{myData.tolowerCase} </span>
</h1>
<input type="text"/>
</div>)

 

6、标签必须闭合
7、标签首字母
1)若小写字母，则将该标签转换为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错
2)若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错

标签：---,const,tolowerCase,myData,标签,React,jsx,VDOM
From： https://www.cnblogs.com/binbinstudent2020/p/17070998.html