如何在 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

如何在 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

更新於: 2022年8月23日

671 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.