关于 jsx 语法的注意事项|学习笔记

简介: 快速学习关于 jsx 语法的注意事项

开发者学堂课程【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 ' ))

运行结果:

b21e922b1e1e33884ac2186b99f8b1b.jpg

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


二、jsx 注意点

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

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

htmlFor 替换 label for 属性)

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

代码示例:

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

<label htmlFor=ooo1111</label>

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

acddb7fa237d36db43eac1c61c649fd.jpg

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

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

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

相关文章
|
6月前
|
JavaScript 前端开发
请详细解释一下Vue的模板语法中各个指令的具体用法。
请详细解释一下Vue的模板语法中各个指令的具体用法。
34 2
|
6月前
|
缓存 JavaScript
Vue3 的模板语法:指令、插值语法和其他相关特性
Vue3 的模板语法:指令、插值语法和其他相关特性
201 4
Vue3 的模板语法:指令、插值语法和其他相关特性
|
6月前
|
JavaScript
详细介绍 TypeScript 中常用的循环语句,包括它们的语法、用法以及一些注意事项
详细介绍 TypeScript 中常用的循环语句,包括它们的语法、用法以及一些注意事项
177 1
|
4天前
|
存储 容器
JavaSpcript语法
通常高级程序设计语言所包含的语法内容: 1、关键字:该种语言中被赋予了特殊含义的单词。 2、标识符:用于标识数据跟表达式的符号。通常可以理解为在程序中自定义的名称。如变量名,函数名。 3、注释:注解说明解释程序,用于调试程序 4、变量:用于标识内存中一片空间。用于存储数据,该空间中的数据是可以变化的。当数据不确定时用变量。 5、运算符:可以让数据进行运算的符号。 6、语句:用于对程序的运行流程进行控制的表达式。 7、函数:用于对功能代码进行封装,便于提高复用性。 8、数组:对多数据进行存储,便于操作,也就是容器。 9、对象:只要是基于对象或者面向对象的语音,就存在对象的概念,对象就是一个封装体
|
9天前
|
XML 数据格式
XLink 和 XPointer 语法
XLink 和 XPointer 语法
9 2
|
2月前
|
XML 前端开发 JavaScript
JSX 语法详解
【9月更文挑战第2天】本文详细介绍了React框架中核心组件JSX的基本概念与高级用法,包括基本语法、条件与列表渲染等。并通过具体示例讲解了如何避免常见的错误,如忘记闭合标签、未使用`key`属性及属性名大小写问题,帮助读者更好地理解和运用JSX,提升React应用程序的开发质量。
61 4
|
6月前
|
C语言 Python
【关于C的一些较为特殊的语法】
【关于C的一些较为特殊的语法】
32 0
|
前端开发 JavaScript
JSX语法入门
JSX语法入门
47 0
|
JavaScript
03-Vue基础语法之指令语法与条件渲染
03-Vue基础语法之指令语法与条件渲染
55 0
|
JavaScript
【Vue】大悟!模板语法-插值语法&指令语法
【Vue】大悟!模板语法-插值语法&指令语法