ReactJS - JSX

正如我們之前學到的，React JSX 是 JavaScript 的一個擴充套件。它允許編寫看起來像 HTML 程式碼的 JavaScript 程式碼。例如，請考慮以下程式碼

const element = <h1>Hello React!</h1>

上面程式碼中提供的標籤被稱為 JSX。JSX 主要用於提供有關介面外觀的資訊。但是，它並非完全是一種模板語言，而是 JavaScript 的語法擴充套件。JSX 生成呈現到 DOM 中的元素，以便指定輸出的外觀。

在 ReactJS 中使用 JSX

JSX 使開發人員能夠使用 XML 語法建立虛擬 DOM。它編譯成純 JavaScript（React.createElement 函式呼叫），因此它可以在任何有效的 JavaScript 程式碼中使用。

分配給變數。

var greeting = <h1>Hello React!</h1>

基於條件分配給變數。

var canGreet = true; 
if(canGreet) { 
   greeting = <h1>Hello React!</h1> 
}

可以用作函式的返回值。

function Greeting() { 
   return <h1>Hello React!</h1> 
   
} 
greeting = Greeting()

可以用作函式的引數。

function Greet(message) { 
   ReactDOM.render(message, document.getElementById('react-app') 
} 
Greet(<h1>Hello React!</h1>)

為什麼使用 JSX？

在 React 中使用 JSX 不是強制性的，因為有各種方法可以實現與 JSX 相同的功能；但它作為在 JavaScript 程式碼中處理 UI 時的視覺輔助工具很有幫助。

JSX 在將程式碼轉換為 JavaScript 時執行最佳化，使其比常規 JavaScript 更快。
React 使用包含標記和邏輯的元件在一個檔案中，而不是在單獨的檔案中。
由於資料流是單向的，因此大多數錯誤可以在編譯時發現。
使用 JSX 可以更輕鬆地建立模板。
我們可以在條件語句（if-else）和迴圈語句（for 迴圈）中使用 JSX，可以將其分配給變數，作為引數接收，或從函式中返回。
使用 JSX 可以防止跨站點指令碼攻擊或注入攻擊。

JSX 中的表示式

JSX 支援純 JavaScript 語法的表示式。表示式必須用花括號{ }括起來。表示式可以包含上下文中所有可用的變數，其中定義了 JSX。讓我們建立一個帶有表示式的簡單 JSX。

示例

<script type="text/babel">
   var cTime = new Date().toTimeString();
   ReactDOM.render(
      <div><p>The current time is {cTime}</p></div>, 
      document.getElementById('react-app') );
</script>

輸出

這裡，cTime 使用表示式在 JSX 中使用。以上程式碼的輸出如下所示：

The Current time is 21:19:56 GMT+0530(India Standard Time)

使用 JSX 中的表示式的積極副作用之一是它可以防止注入攻擊，因為它將任何字串轉換為 html 安全字串。

JSX 中的函式

JSX 支援使用者定義的 JavaScript 函式。函式的使用類似於表示式。讓我們建立一個簡單的函式並在 JSX 中使用它。

示例

<script type="text/babel">
   var cTime = new Date().toTimeString();
   ReactDOM.render(
      <div><p>The current time is {cTime}</p></div>, 
      document.getElementById('react-app') 
   );
</script>

輸出

這裡，getCurrentTime() 用於獲取當前時間，輸出類似於以下所示：

The Current time is 21:19:56 GMT+0530(India Standard Time)

JSX 中的屬性

JSX 支援類似 HTML 的屬性。所有 HTML 標籤及其屬性都受支援。屬性必須使用駝峰命名法（並遵循 JavaScript DOM API）而不是普通的 HTML 屬性名稱來指定。例如，HTML 中的 class 屬性必須定義為className。以下是一些其他示例：

htmlFor 代替 for
tabIndex 代替 tabindex
onClick 代替 onclick

示例

<style>
   .red { color: red }
</style>
<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   ReactDOM.render(
      <div>
         <p>The current time is <span className="red">{getCurrentTime()}</span></p>
      </div>,
      document.getElementById('react-app') 
   );
</script>

輸出

輸出如下所示：

The Current time is 22:36:55 GMT+0530(India Standard Time)

在屬性中使用表示式

JSX 支援在屬性內部指定表示式。在屬性中，不應與表示式一起使用雙引號。必須使用表示式或使用雙引號的字串。上面的示例可以更改為在屬性中使用表示式。

<style>
   .red { color: red }
</style>

<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   var class_name = "red";
   ReactDOM.render(
      <div>
         <p>The current time is <span className={class_name}>{getCurrentTime()}</span></p>
      </div>, 
      document.getElementById('react-app') 
   );
</script>

JSX 中的巢狀元素

JSX 中的巢狀元素可以用作 JSX 子元素。它們在顯示巢狀元件時非常有用。您可以將任何型別的元素組合在一起，包括標籤、文字、函式、表示式等。但是 false、null、undefined 和 true 都是 JSX 的有效元素；它們只是不呈現，因為這些 JSX 表示式最終都會呈現為相同的內容。在這種情況下，JSX 類似於 HTML。

以下是一段簡單的程式碼，用於演示 JSX 中巢狀元素的使用：

<div>
   This is a list:
   <ul>
      <li>Element 1</li>
      <li>Element 2</li>
   </ul>
</div>

列印頁面