前端开发的利器：JSX 综合示例（以 Vue 3 为例）

2023-11-24 20:33:26

JSX：提升 Vue 应用程序可读性和可维护性的利器

JSX 简介

JSX（JavaScript XML）是一种 JavaScript 扩展，允许您将 HTML 代码嵌入 JavaScript 中。这种组合方式显著提高了代码的可读性和可维护性，因为您可以在同一个文件中同时管理结构和行为。JSX 的语法与 HTML 类似，但提供了一些额外的功能，例如：

使用 JavaScript 表达式动态生成 HTML 代码
通过组件实现代码复用
借助模板创建复杂的用户界面

在 Vue 3 中启用 JSX

要使用 JSX，请安装 @vue/compiler-sfc 依赖项：

npm install -D @vue/compiler-sfc

然后，在 vue.config.js 文件中启用 JSX：

module.exports = {
  compilerOptions: {
    // ...
    parserOptions: {
      parser: '@typescript-eslint/parser',
    },
    SFC: {
      jsxFork: true,
    },
  },
};

JSX 基础用法

以下是一些 JSX 的基本用法示例：

// 创建简单组件
const MyComponent = () => {
  return <h1>Hello World!</h1>;
};

// 创建带有属性的组件
const MyComponent = (props) => {
  return <h1>Hello {props.name}!</h1>;
};

// 创建带有子组件的组件
const MyComponent = () => {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

JSX 进阶用法

JSX 还支持更高级的功能，例如：

动态生成 HTML 代码： 使用 JavaScript 表达式动态生成 HTML。例如，您可以动态创建 <li> 列表：

const items = ['apple', 'banana', 'cherry'];

const MyComponent = () => {
  return (
    <ul>
      {items.map((item) => <li>{item}</li>)}
    </ul>
  );
};

代码复用： 创建可重复使用的组件。例如，您可以创建一个 <Header> 组件：

<!-- Header.vue -->
<template>
  <div>
    <h1>My App</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </div>
</template>

然后在应用程序中使用它：

<!-- App.vue -->
<template>
  <div>
    <Header />
    <main>
      <!-- 主内容 -->
    </main>
  </div>
</template>

创建复杂 UI： 使用模板创建更复杂的界面。例如，您可以创建一个表单模板：

<template>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name">

    <label for="email">Email:</label>
    <input type="email" id="email">

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