如何在 JSX 中嵌入 JavaScript 表达式?
JSX 是一种扩展,用于在 ReactJS(一个著名的 Javascript 框架)中轻松创建模板。类似于 Javascript 文件以 .js 扩展名保存,React 文件以 .jsx 扩展名保存。使用 JSX,程序员可以在 React 中编写 HTML 代码,并轻松地在 React DOM 中渲染元素,而无需额外的 方法或函数。
更重要的是,JSX 的创建是为了轻松地将 HTML 元素转换为 React 元素。事实上,JSX 对所有类型的程序员都有益,因为它比传统的 Javascript 更快。开发人员还可以更轻松地设计 UI 模板,并使用 JSX 实现其简洁的结构。
考虑到以上几点,让我们讨论 JSX 的一些属性以及如何有效地将 Javascript 表达式嵌入到 JSX 中。
在 JSX 中使用 JavaScript 表达式
在 React 中,我们不仅可以使用 HTML 元素,还可以使用 Javascript 表达式以及 JSX。使用花括号 {},以及任何有效的 Javascript 表达式都可以嵌入到 JSK 代码中。以下是一个代码示例,用于解释 JSX 表达式的嵌入,以便您更好地理解这一点 -
示例
在下面的程序中,我们使用花括号将 Javascript 表达式 const name = "Beginner"; 嵌入到 JSX 代码中。
import React from 'react'; import ReactDOM from 'react-dom'; const name = "Beginner"; const element = <h1>Hello, { name }.Welcome to Tutorialspoint.</h1>; ReactDOM.render( element, document.getElementById("root") );
如上所述,您可以将任何有效的 Javascript 表达式嵌入到您的 JSK 代码中;例如,4 + 4 和 employee.lastName 都是有效的 Javascript 表达式。
程序员可以进一步替换 JSX 中的 if-else 语句。这可以通过使用条件语句而不是 if-else 语句来实现。让我们看看如何使用以下程序来完成此操作 -
示例
import React from 'react'; import ReactDOM from 'react-dom'; let i = 1; const element = <h1>{ (i == 1) ? 'Hello World!' : 'False!' } </h1>; ReactDOM.render( element, document.getElementById("root") );
输出
Hello World !
执行上述程序后,浏览器上将显示“Hello World”消息。
JSX 中的唯一属性
在 HTML 中,属性用于指定 HTML 元素的特性。幸运的是,JSX 允许我们在相关的 HTML 元素中包含属性。通常,这些属性以标准命名约定呈现。但是,关于 JSX,您可以发现以驼峰命名法呈现的唯一属性。
在 Javascript 中,“class”被认为是保留关键字。这正是为了避免错误而使用驼峰命名约定来命名属性的原因。因此,HTML 中的 class 将命名为 className。
更重要的是,程序员也可以向 JSX 添加自定义属性。自定义属性不属于标准 HTML5 属性。这些属性由程序员创建。在驼峰命名法中,自定义属性的属性名称以 data 开头。
以下是用 JSX 中的属性的示例,以便您更好地理解 -
示例
下面的程序中使用了自定义属性 data-sampleAttribute,它使用驼峰命名法并以 data- 为前缀。
import React from 'react'; import ReactDOM from 'react-dom'; const element = <div> <h1 className = "hello">Hello Geek</h1> <h2 data-sampleAttribute="sample">Custom attribute</h2> </div>; ReactDOM.render( element, document.getElementById("root") );
输出
Hello Geek Custom attribute
Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.
如何在 JSX 中指定属性?
在 JSX 中,可以以下列方式指定属性 -
- 字符串文字 - 属性像普通字符串一样用引号括起来。
const ele = <h1 className = "firstAttribute">Hello!</h1>;
- 表达式 - 属性像表达式一样可以用花括号括起来。
const ele = <h1 className = {varName}>Hello!</h1>;
如何在 JSX 中添加注释?
在整洁的代码中,程序员使用注释来定义每个部分和函数的目的,这在以后的编译和测试过程中会很有用。在 JSX 中,注释以/*开头,以*/结尾,然后像表达式一样用花括号 {} 括起来。
以下是如何在 JSX 中使用注释的示例 -
示例
在下面的 JSX 程序中,我们使用了一个示例注释“This is a comment in JSX”,它用/**/和{}括起来。
import React from 'react'; import ReactDOM from 'react-dom'; const element = <div> <h1>Hello World !</h1> {/ * This is a comment in JSX * /} </div>; ReactDOM.render( element, document.getElementById("root") );
输出
Hello World !
程序员可以在 Javascript 中使用的常见 JSX 表达式
如前所述,JSX 只有在用花括号 {} 封装的情况下才会接受表达式。但这并不意味着转译器会识别花括号中包含的任何表达式。
以下是允许在 JSX 中使用的常见表达式类型 -
- 变量和对象值
- 函数调用和引用
- 表达式和运算符
- 循环和迭代
示例
在下面的程序中,我们在花括号中使用变量 price -
import React from "react"; const price = 2000; export default function Vehicles() { return( <div> Car Price: {price} </div> ); }
输出
Car price: 2000