关于jsx语法的注意事项

 

目录：

一、在jsx中写注释

二、jsx注意点

 

 

一、在jsx中写注释

在jsx中写注释：在JSX中使用{}

Jsx直接使用花括号内部注释，在css中使用双斜杠注释，这样是不行的，在网页中<!---->这样也不行，语法不通过也会报错，只能写js的注释，因为花括号内可以写任何合法的js代码，注释也是js的代码。

 

1.  注释正确写法

（1）{/* {这是注释} */}

（2）{

//这是注释，你看不见我

}

{ //}这么写是不行的，因为括号是成对出现的，当括号中间写了//时，他把后面的括号注释了，他还有结尾匹配的括号就没有了，这样他就不成对了，因为前一个括号是黑色的，后面一个括号是灰色的，所以这样是不行的。不过可以换一种方式写，

如下所示：

{

//这是注释，你看不见我

}

 

2.注释错误示例

（1）/**/

 

（2）<!---->

 

（3）{ // }

 

注释代码示例：

 

ReactDOM. render (<div>

{a + 2}

<hr />

{ str}

<hr />

{boo ? '条件为真·:'条件为假}

<hr />

<p title={title}>这是p标签</p>

{h1}

<hr />

{ /*{ arr) */}

{

//这是注释，你看不见我

}

<hr />

{nameArr)<hr />

{arrstr.map(item=><divkey={item}><h3>{item}</h3></div>)}</div>, document.getElementById ( ' app ' ))

 

运行结果：

推荐单行注释，原因在于占函数少

 

二、jsx注意点

1.为jsx中的元素添加class类名

（不能直接使用class,需要使用‘className‘来代替 class；

htmlFor替换label的for属性）

for和class数据js中的关键字，使用有歧义，需要更改

代码示例：

<p className=”myele”>!!!!!</p>

<label htmlFor=”ooo”1111</label>

使用class作为类名运行结果：

编译会报错，手动把class改为classname,使用HTMLfor代替for

 

元素绑定属性，属性内部用花括号绑定，不可加双引号，加双引号将会变成字符串

 

2.在jsx创建DOM的时候，所有的节点，必须有位于的根元素进行包裹，vue中在必须要有一个根元素