了解 React JSX 的規則 | React

在 React 中，JSX（JavaScript XML）是一種語法擴展，它允許我們在 JavaScript 中編寫類似 HTML 的語法。雖然 JSX 看起來很像 HTML，但它實際上是 JavaScript。

JSX 的基本規則

1. ** 嵌入 JavaScript 表達式：** 在 JSX 中，你可以使用 {} 將 JavaScript 表達式嵌入到任何地方。這使得在 JSX 中動態生成內容變得容易。

範例：

const name = "React";
const element = <h1>Hello, {name}</h1>;

1. JSX 元素只能有一個根元素： 每個 JSX 表達式都必須只有一個根元素。這意味著你無法直接返回多個元素。你可以使用 <React.Fragment> 或空的 <> 來包裹多個元素。

範例：

// 使用 React.Fragment
const element = (
  <React.Fragment>
    <h1>Hello</h1>
    <p>React JSX rules!</p>
  </React.Fragment>
);

// 使用空的 <>
const element = (
  <>
    <h1>Hello</h1>
    <p>React JSX rules!</p>
  </>
);

1. 屬性名使用 camelCase： 在 JSX 中，HTML 屬性名應該使用 camelCase 命名法，例如 className 而不是 class，htmlFor 而不是 for。

範例：

const element = <div className="container">Hello, World!</div>;

1. 使用引號包裹字符串屬性： 在 JSX 中，屬性值應該始終使用引號包裹。

範例：

const element = <input type="text" placeholder="Enter your name" />;

1. JSX 中的註釋： 在 JSX 中，你可以使用 JavaScript 風格的單行和多行註釋。

範例：

const element = (
  <div>
    {/* 這是一個單行註釋 */}
    <h1>Hello</h1>
    {/* 
      這是一個多行註釋
      可以跨行
    */}
    <p>React JSX rules!</p>
  </div>
);

總結

了解這些 JSX 的基本規則將有助於你更好地編寫和理解 React 應用程序中的代碼。雖然 JSX 看起來很像 HTML，但它實際上是 JavaScript 的一部分，並且遵循了一些特定的規則。熟悉這些規則將使你更有效地使用 JSX 來構建動態且易於維護的用戶界面。

希望本篇文章能幫助你理解 React JSX 的規則，並將其應用於你的 React 專案中！