如何将 JavaScript 表达式嵌入到 JSX 中?

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 表达式的嵌入，以便您更好地理解 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 中的类将被命名为 className。

更重要的是?程序员也可以向 JSX 添加自定义属性。自定义属性不属于标准 HTML5 属性。这些属性由程序员创建。在驼峰式命名法中，自定义属性的属性名称前面带有数据。

下面是一个在 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

如何在 JSX 中指定属性?

在 JSX 中，可以通过以下方式指定属性 -

• 字符串文字 - 属性与普通字符串一样括在引号中。

const ele = <h1 className = "firstAttribute">Hello!</h1>;

• 表达式 − 表达式之类的属性可以用花括号括起来。

const ele = <h1 className = {varName}>Hello!</h1>;

如何在 JSX 中添加注释?

在整洁的代码中，程序员使用注释来定义每个部分和函数的用途，这在以后的编译和测试中很有用。在 JSX 中，注释以 /* 开头，以 */ 结尾，然后像表达式一样括在花括号 {} 中。

以下是 JSX 中注释使用示例 −

示例

在下面的 JSX 程序中，我们使用示例注释"这是 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

相关文章

• 如何在 ReactJS 中向类添加生命周期方法?
• 如何将 JavaScript 表达式嵌入到 JSX 中?