React JSX

什麼是 JSX？

JSX 代表 JavaScript XML。

JSX 允許我們在 React 中編寫 HTML。

JSX 使在 React 中編寫和新增 HTML 更加容易。

編寫 JSX 程式碼

JSX 允許我們在 JavaScript 中編寫 HTML 元素，並將它們放置在 DOM 中，而無需使用任何 createElement() 或 appendChild() 方法。

JSX 將 HTML 標籤轉換為 React 元素。

這裡有兩個例子。第一個使用 JSX，第二個不使用。

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

正如您在第一個示例中看到的，JSX 允許我們在 JavaScript 程式碼中直接編寫 HTML。

JSX 是基於 ES6 的 JavaScript 語言的擴充套件，它在執行時會被翻譯成常規的 JavaScript。

JSX 中的表示式

使用 JSX，您可以在花括號 { } 內編寫表示式。

表示式可以是 React 變數、屬性或任何其他有效的 JavaScript 表示式。JSX 會執行該表示式並返回結果。

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

插入大塊 HTML

要編寫多行 HTML，請將 HTML 放在括號內。

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

一個頂級元素

HTML 程式碼必須包含在*一個*頂級元素中。

因此，如果您想寫*兩個*段落，您必須將它們放在一個父元素內，例如 div 元素。

const myElement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

或者，您可以使用“片段”來包裝多行。這將避免不必要地向 DOM 新增額外的節點。

片段看起來像一個空的 HTML 標籤：<></>。

const myElement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

元素必須閉合

JSX 遵循 XML 規則，因此 HTML 元素必須正確閉合。

const myElement = <input type="text" />;

屬性 class = className

class 屬性在 HTML 中是一個常用屬性，但由於 JSX 被渲染為 JavaScript，並且 class 關鍵字在 JavaScript 中是保留字，因此您不能在 JSX 中使用它。

JSX 透過使用 className 來解決這個問題。當 JSX 被渲染時，它會將 className 屬性轉換為 class 屬性。

const myElement = <h1 className="myclass">Hello World</h1>;

條件 - if 語句

React 支援 if 語句，但*不在* JSX 內部。

要在 JSX 中使用條件語句，您應該將 if 語句放在 JSX 之外，或者您可以使用三元表示式代替。

選項 1

將 if 語句寫在 JSX 程式碼之外

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myElement = <h1>{text}</h1>;

選項 2

改用三元表示式

const x = 5;

const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;