【React】使用 JSX 为 JavaScript 添加标签

使用 JSX 为 JavaScript 添加标签实际上是将 JSX 语法与 JavaScript 代码结合使用，以描述用户界面。JSX 允许你在 JavaScript 中编写类似 HTML 的结构，并最终由 React 库将其转换为真正的 DOM 元素。以下是将标签引入 JavaScript 以及将 HTML 转化为 JSX 的步骤和 JSX 的一些基本规则：

将标签引入 JavaScript

在 React 中，你可以直接在 JavaScript 文件中使用 JSX 来定义组件的结构。例如：

function MyComponent() {  

  return (  

    <div>  

      <h1>Hello, JSX!</h1>  

      <p>This is a paragraph.</p>  

    </div>  

  );  

}

在这个例子中，<div>，<h1>和<p>就是被引入 JavaScript 的标签。这些标签定义了组件的渲染结构。

将 HTML 转化为 JSX

将 HTML 转化为 JSX 通常涉及以下几个步骤：

1. 将 HTML 标签转换为 JSX 标签：大多数 HTML 标签在 JSX 中保持不变，除了几个需要特别注意的地方。
2. 使用大括号 {} 嵌入 JavaScript 表达式：在 JSX 中，你可以在标签属性或文本内容中使用大括号来嵌入 JavaScript 表达式。
3. 处理类名 (class) 和 for 属性：在 HTML 中，我们使用 class 和 for 作为属性名，但在 JSX 中，由于这两个词是 JavaScript 的保留字，所以我们需要将它们分别改为 className 和 htmlFor。
4. 使用驼峰命名法设置样式：在 JSX 中设置样式时，需要将 CSS 属性名转换为驼峰形式，例如 background-color 变为 backgroundColor。

例如，HTML 代码：

<div class="container">  

  <form action="/submit" method="post">  

    <label for="username">Username:</label>  

    <input type="text" name="username" id="username" />  

    <button type="submit">Submit</button>  

  </form>  

</div>

转化为 JSX：

function MyForm() {  

  return (  

    <div className="container">  

      <form action="/submit" method="post">  

        <label htmlFor="username">Username:</label>  

        <input type="text" name="username" id="username" />  

        <button type="submit">Submit</button>  

      </form>  

    </div>  

  );  

}

JSX 规则

1.所有 JSX 标签必须闭合：

无论是单标签还是双标签，都必须有正确的闭合方式。单标签以“/”结尾，例如

<img />。

2.标签名使用大写字母：

在 JSX 中，当标签名以大写字母开头时，它会被视为一个 React 组件。而 HTML 标签通常以小写字母开头。

3.属性名使用驼峰命名法

如果 HTML 属性名不符合 JavaScript 的标识符命名规则，那么需要在 JSX 中使用驼峰命名法来替代。

4.嵌入 JavaScript 表达式

在 JSX 中，你可以使用大括号{}来嵌入任何有效的 JavaScript 表达式。

5.样式对象

JSX 中的style属性接受一个 JavaScript 对象，而不是字符串。对象的键是驼峰式命名的 CSS 属性。

6.列表渲染

当渲染一个列表时，你应该为每个列表项提供一个唯一的key属性，以帮助 React 识别列表项的变化。

7.自闭合标签

某些 HTML 标签（如<img>、<input>、<br />、<hr />等）在 HTML 中是自闭合的。在 JSX 中，这些标签也必须是自闭合的，以<tagName />的形式书写。

了解并遵循这些规则，你可以有效地在 JavaScript 中使用 JSX 来描述 React 组件的 UI 结构

高级提示：使用 JSX 转化器

使用在线 JSX 转化器

如果你只是想快速查看 JSX 代码被转换成什么样的 JavaScript 代码，你可以使用在线的 JSX 转化器，如 Babel 的官方在线转化器（https://babeljs.io/repl/）或者（https://transform.tools/html-to-jsx）