开发者学堂课程【React 入门与实战:关于 jsx 语法的注意事项】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/585/detail/8087
关于 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 中在必须要有一个根元素。