jsx中的语法规则

目录

1-jsx的语法规则

1-1定义虚拟DOM时，不要写引号。

1-2标签中混入JS表达式时要用{}。

1-3样式的类名指定不要用class，要用className。

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

1-5只有一个根标签

1-6 标签必须闭合

1-7标签首字母写法 

---

1-jsx的语法规则

1-1定义虚拟DOM时，不要写引号。

使用引号会使无法解析标签，标签会被解析为字符串，所以会报错。

const VDOM = (<h1 id="title"> </h1>)
// 错误示范
const VDOM = ('<h1 id="title"> </h1>')

1-2标签中混入JS表达式时要用{}。

如果没有{}则会按照标签属性进行解析，而需要的是js的表达式，所以用{}将其包裹。

<h2 className="title" id={myId.toLowerCase()}>
// 错误示范，会直接报错
<h2 className="title" id=myId.toLowerCase()>

1-3样式的类名指定不要用class，要用className。

<h2 className="title" id={myId.toLowerCase()}>
// 错误示范，效果能出来，但是会警告输出，非常的人性化
<h2 className="title" id={myId.toLowerCase()}>

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

<span style={{color:'white',fontSize:'29px'}}> </span>
// 错误示范
<span style='color:'white',fontSize:'29px''> </span>

1-5只有一个根标签

const VDOM = (
		<div>
			<h2></h2>
            <span></span>
		</div>
		)
// 错误示范，会直接报错，只能有一个根标签
const VDOM = (
		<div>
			<h2></h2>
            <span></span>
		</div>

        <div>
            <h2></h2>
            <span></span>
        </div>
		)

1-6 标签必须闭合

<img src="" alt="" />
<input type="text" />
<br />
// 错误示范，此类但标签不闭合会直接报错
<img src="" alt="">
<input type="text">
<br>

1-7标签首字母写法 

若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

<h2></h2>
<h3></h3>
<h4></h4>
// 错误代码,因为html中没有h7标签，所以报错
<h7></h7>

若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

// 组件
<H2></H2>
// 元素
<h2></h2>