首页 > 编程语言 >【React】使用 JSX 为 JavaScript 添加标签

【React】使用 JSX 为 JavaScript 添加标签

时间:2024-03-23 11:58:06浏览次数:34  
标签:标签 JavaScript React HTML 使用 JSX

使用 JSX 为 JavaScript 添加标签实际上是将 JSX 语法与 JavaScript 代码结合使用,以描述用户界面。JSX 允许你在 JavaScript 中编写类似 HTML 的结构,并最终由 React 库将其转换为真正的 DOM 元素。以下是将标签引入 JavaScript 以及将 HTML 转化为 JSX 的步骤和 JSX 的一些基本规则:

将标签引入 JavaScript

在 React 中,你可以直接在 JavaScript 文件中使用 JSX 来定义组件的结构。例如:

function MyComponent() {  

  return (  

    <div>  

      <h1>Hello, JSX!</h1>  

      <p>This is a paragraph.</p>  

    </div>  

  );  

}

在这个例子中,<div>,<h1>和<p>就是被引入 JavaScript 的标签。这些标签定义了组件的渲染结构。

将 HTML 转化为 JSX

将 HTML 转化为 JSX 通常涉及以下几个步骤:

  1. 将 HTML 标签转换为 JSX 标签:大多数 HTML 标签在 JSX 中保持不变,除了几个需要特别注意的地方。
  2. 使用大括号 {} 嵌入 JavaScript 表达式:在 JSX 中,你可以在标签属性或文本内容中使用大括号来嵌入 JavaScript 表达式。
  3. 处理类名 (class) 和 for 属性:在 HTML 中,我们使用 class 和 for 作为属性名,但在 JSX 中,由于这两个词是 JavaScript 的保留字,所以我们需要将它们分别改为 className 和 htmlFor。
  4. 使用驼峰命名法设置样式:在 JSX 中设置样式时,需要将 CSS 属性名转换为驼峰形式,例如 background-color 变为 backgroundColor。

例如,HTML 代码:

<div class="container">  

  <form action="/submit" method="post">  

    <label for="username">Username:</label>  

    <input type="text" name="username" id="username" />  

    <button type="submit">Submit</button>  

  </form>  

</div>

转化为 JSX:

function MyForm() {  

  return (  

    <div className="container">  

      <form action="/submit" method="post">  

        <label htmlFor="username">Username:</label>  

        <input type="text" name="username" id="username" />  

        <button type="submit">Submit</button>  

      </form>  

    </div>  

  );  

}

JSX 规则

1.所有 JSX 标签必须闭合

无论是单标签还是双标签,都必须有正确的闭合方式。单标签以“/”结尾,例如

<img />。

2.标签名使用大写字母

在 JSX 中,当标签名以大写字母开头时,它会被视为一个 React 组件。而 HTML 标签通常以小写字母开头。

3.属性名使用驼峰命名法

如果 HTML 属性名不符合 JavaScript 的标识符命名规则,那么需要在 JSX 中使用驼峰命名法来替代。

4.嵌入 JavaScript 表达式

在 JSX 中,你可以使用大括号{}来嵌入任何有效的 JavaScript 表达式。

5.样式对象

JSX 中的style属性接受一个 JavaScript 对象,而不是字符串。对象的键是驼峰式命名的 CSS 属性。

6.列表渲染

当渲染一个列表时,你应该为每个列表项提供一个唯一的key属性,以帮助 React 识别列表项的变化。

7.自闭合标签

某些 HTML 标签(如<img>、<input>、<br />、<hr />等)在 HTML 中是自闭合的。在 JSX 中,这些标签也必须是自闭合的,以<tagName />的形式书写。

了解并遵循这些规则,你可以有效地在 JavaScript 中使用 JSX 来描述 React 组件的 UI 结构

高级提示:使用 JSX 转化器

使用在线 JSX 转化器

如果你只是想快速查看 JSX 代码被转换成什么样的 JavaScript 代码,你可以使用在线的 JSX 转化器,如 Babel 的官方在线转化器(https://babeljs.io/repl/)或者(https://transform.tools/html-to-jsx

标签:标签,JavaScript,React,HTML,使用,JSX
From: https://blog.csdn.net/weixin_42286461/article/details/136955020

相关文章

  • 解决react useEffect中的内容被执行两次的问题
    当我们在函数组件中,希望使用useEffect来达到初始化的目的时,会发现总是在初始化的时候执行两遍问题复现组件代码部分import"./assets/App.css";import{useEffect}from"react";constApp=()=>{useEffect(()=>{console.log("组件初始化");},......
  • JavaScript之Promise补充与Dom操作
    Promise过程分析//按照顺序依次引入a-d.js,最后打印加载完毕load('a.js').then(()=>{returnload('b.js')//load方法返回Pomise对象//但是没有把这个对象返回//所以这个函数没有返回值//then方法会提供一个空对象作为返......
  • 【React 】如何提高组件的渲染效率?在React中如何避免不必要的render?
    1.是什么react基于虚拟DOM和高效Diff算法的完美配合,实现了对DOM最小粒度的更新,大多数情况下,React对DOM的渲染效率足以我们的业务日常复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,避免不必要的渲染则是业务中常见的优化手段之一2.如何做......
  • 关于javaScript的计算精度的解决办法
    项目中我们常常需要做一些计算,由于浮点数的二进制表示可能不精确,经常会遇到计算精度问题,例letresultNum=0.1+0.2;console.log(resultNum);//0.30000000000000004这个时候,如果我们不单独处理,那么页面上展示的时候就出现布局错乱等问题,比如我们可以保留两位小数采用Number(r......
  • vue或react项目上线刷新出现404的原因以及解决办法
    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个index.html文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,其它的路由都是通......
  • JavaScript object.is()和严格相等、非严格相等的区别
    1.==(相等运算符)        当使用==比较两个值时,如果它们的类型不同,JavaScript会尝试将它们转换为一个共同的类型,然后再进行比较。这个过程称为类型转换或类型强制。0=='0'//true,因为字符串'0'会转换为数字01==true//true,因为布尔值true会转换为数字1nul......
  • react 版本比对的库
     react版本比对的库React本身不提供版本比对的库,但是你可以使用第三方库 semver 来进行版本比较。semver 是一个用于处理语义版本(SemanticVersioning)的库,它提供了一系列的方法来比较版本号。首先,你需要安装 semver 库:  npminstallsemver然后,你可......
  • 4年前的React老项目打包报错解决问题处理过程
    处理公司一个4年前React应用时,发现打包编译时会出现如题错误:Failedtominifythebundle.Error:index.71782de2.jsfromUglify]s  查看打包编译后源码错误位置: 经过bing搜索引擎查找类似解决方式: https://github.com/sorrycc/blog/issues/68 1、npm安装 https://g......
  • React配置Eslint
    Eslint的配置相对复杂一点,记录一下项目中使用的配置,以备后续查阅。1.下载Eslint插件并在webpack的配置文件中声明、初始化constEslintWebpackPlugin=require("eslint-webpack-plugin");plugins:[//eslint用于代码规范检查,作用相当于js的编译器//esl......
  • JavaScript 本地存储
    1.前言由来:localStorage和sessionStorage是HTML5标准中新加入的技术,用于保存整个网站的数据两者区别:localStorage的生命周期是永久的,除非手动删除,而sessionStorage仅在当前会话下有效(即使是同个域名下的网页也无法访问当前会话下创建的键值对,关闭页面或浏览器后被清除,刷新当......