jsx的简单使用教程

最新推荐文章于 2025-03-09 09:00:00 发布

jackwang666

最新推荐文章于 2025-03-09 09:00:00 发布

阅读量4.6k

点赞数 1

文章标签： jsx react 模版

本文链接：https://blog.youkuaiyun.com/u012021089/article/details/76166917

版权

这篇教程介绍了JSX的基本概念，它是React中用于创建虚拟DOM的HTML-like语法。文章讲解了JSX的书写规则，如HTML与JavaScript混合编写，顶级标签包裹，单标签闭合，属性名的调整（如class改为className），内联样式的JSON格式，以及如何在jsx中嵌入JavaScript表达式和添加事件监听。这是React初学者理解jsx语法的良好起点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  一、jsx语法是什么？ 

 
 JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。千万不要把jsx想象的那么难，这是一种既简单又能够快速掌握的语法。 

  二、我们能用jsx语法干点什么？ 

  在没有接触react之前，我是一点都没有了解过jsx语法的任何特性，我了解该语法完全是为了学习react，所以对于我个人来说，用jsx语法就是为了学习react也不算过分 

 
 三、jsx语法的学习 

 
 1、书写格式： 

 
 在jsx语法中，html语言和js语言是可以写在一起的 

 
 例如：let a = <div>welcome</div> 

 
 2、在jsx语法中必须要用一个顶级标签来包裹里面的子标签（在多个标签的情况下） 

 
 例如：（可以自由缩进） 

 
 let a = <div> 

 
 <p>这是一个p标签</p> 

 
 <span>这是一个span标签</span> 

 
 </div> 

 
 也可以在外面加一个括号 

 
 let = （<div> 

 
 <p>这是一个p标签</p> 

 
 <span>这是一个span标签</span> 

 
 </div>） 

 
 3、单标记标签必须闭合 

 
 例如：let a = <img src="" /> 

 
 4、如果需要给标签添加class必须写成className 

 
 例如 let a = <img src="" className="img" /> 

 
 5、如果使用行间样式style的话，必须写成json模式 

 
 例如：<img src={imgUrl} style={{width:'200px',height:'100px'}} /> 

 
 6、在jsx语法中如果需要使用js，可以使用{}包裹起来 

 
 例如 var a = 'welcome to china' 

 
 let b = <div>{a}</div> 

 
 7、如果在jsx中加事件，必须采用驼峰命名法 

 
 <div onClick={alert(1)}></div> 

 
 未完，待续…… 