vue中使用JSX

麟玖Sam2025-04-162025-04-16

在 vue 中使用 JSX

目标：学习在 vue 中使用 jsx 语法的方式

认识函数式组件和 JSX
学习 JSX 语法规则和函数式组件的使用方式

① 认识函数式组件和 JSX

React 使用函数式组件和 JSX 构建用户界面，Vue 目前也对函数式组件和 JSX 语法进行了支持。

TSX
// 返回 JSX 的函数就是函数式组件
export const LearnJsx = () => {}

TSX
// JSX 语法
const jsx = <div>Hello, JSX</div>;

TSX
// src/test/LearnJsx.tsx
// 函数式组件, 要求返回用户界面, 而用户界面使用 JSX 进行构建
export const LearnJsx = () => {
  // JSX 语法, JSX 和 HTML 很像，但 JSX 是 JavaScript 不是 HTML。
  return (
    <div>
      我是组件 LearnJsx
      <HelloWorld />
    </div>
  );
};

export const HelloWorld = () => {
  return <div>Hello World</div>;
};

<!-- src/App.vue -->
<script setup lang="ts">
import { LearnJsx } from "./test/LearnJsx";
</script>

<template>
  <LearnJsx />
</template>

② 学习 JSX 语法规则和函数式组件的使用方式

(1) 在使用 JSX 语法创建元素时，元素的最外层必须要有一个根标记。

TSX
// 错误写法
const jsx = (
  <p>Hello</p>
  <p>world</p>
)

TSX
// 正确写法
const jsx = (
  <div>
    <p>Hello</p>
    <p>world</p>
  </div>
)

TSX
// 为避免要满足规定而出现无意义标记，可以使用空标记作为根标记，空标记不会被渲染成真实 DOM 节点。
const jsx = (
  <>
    <p>Hello</p>
    <p>world</p>
  </>
)

(2) 在 JSX 中单标记是必须闭合的

TSX
const jsx = <input type="text" />;
const jsx = <img src="" />;

(3) 标记属性使用驼峰式命名法

TSX
// 注意: vue 中标记属性也可以不使用驼峰式命名法, 但是在 React 中是必须使用的
// 为了学习一致性, 无论 vue 还是 react 我们都使用驼峰式命名法
const jsx = <input maxLength="10" readOnly autoFocus />;

(4) 使用 className 替换 class、使用 htmlFor 替换 for，因为 class 和 for 是 JavaScript 中的关键字

<!-- HTML 写法 -->
<input class="todos">
<label for="demo">This is a test input</label>

TSX
// JSX 写法
<input className="todos" />
<label htmlFor="demo">This is a test input</label>

(5) 在 JSX 中使用 {/**/} 作为注释

TSX
const jsx = (
  <>
    {/* 头部 */}
    <div>header</div>
    {/* 底部 */}
    <div>footer</div>
  </>
)

(6) 在 JSX 中插值语法为单花括号，无论为元素内容添加动态值还是为元素属性添加动态值都使用插值表达式

TSX
export const LearnJsx = () => {
  const someContent = "something...";
  const someClassName = "active";
  return <div className={someClassName}>{someContent}</div>;
};

TSX
// 在 jsx 中插入对象
export const LearnJsx = () => {
  return (
    <div
      style={{
        height: "200px",
        width: "200px",
        background: "red",
      }}
    >
      box
    </div>
  );
};

(7) JSX 元素的事件名称使用驼峰式命名法，比如 onClick、onChange

TSX
export const LearnJsx = () => {
  return <button onClick={() => alert(1)}>button</button>;
};

(8) 使用 JSX 遍历列表

TSX
const fruites = [
  { id: 1, name: "apple" },
  { id: 2, name: "banana" },
  { id: 3, name: "pear" },
];

export const LearnJsx = () => {
  return (
    <ul>
      {fruites.map((item) => (
        <li key={item.id}>
          {item.id} {item.name}
        </li>
      ))}
    </ul>
  );
};

(9) 在函数式组件中声明响应式数据的方式

TSX
// 声明响应式状态
const count = ref(0);

export const LearnJsx = () => {
  // 使用响应式状态
  // 注意: 目前我们写的所有的代码都是 JavaScript 代码, 所以在使用通过 ref 创建的响应式数据时都需要加 .value
  return (
    <button
      onClick={() => {
        count.value = count.value + 1;
      }}
    >
      {count.value}
    </button>
  );
};

(10) 在 JSX 中进行条件判断

TSX
const isActive = ref(false);

export const LearnJsx = () => {
  // 由于我们此处写的是 JavaScript 代码, 所以 JavaScript 所有语法在此处均可生效
  return (
    <>
      <div className={isActive.value ? "active" : "inactive"}></div>
      {isActive.value ? <div>渲染了 div</div> : <p>p 被渲染了 </p>}
      <button
        onClick={() => {
          isActive.value = !isActive.value;
        }}
      >
        button
      </button>
    </>
  );
};

(11) 在 JSX 中使用指令

TSX
const isActive = ref(false);
const HTMLContent = ref("<h1>Hello v-html</h1>");
const textContent = ref("Hello v-text");
const inputContent = ref("");

export const LearnJsx = () => {
  return (
    <>
      <div v-show={isActive.value}>渲染了 div</div>
      <p v-show={!isActive.value}>p 被渲染了 </p>
      <div v-html={HTMLContent.value}></div>
      <div v-text={textContent.value}></div>
      <input type="text" v-model={inputContent.value} />
      {inputContent.value}
      <button
        onClick={() => {
          isActive.value = !isActive.value;
        }}
      >
        button
      </button>
    </>
  );
};
// 注意: 并不是所有的指令都可以在 JSX 中使用，比如 v-if、v-on、v-pre、v-once、v-memo、v-cloak、v-slot

(12) 函数式组件传递 props 和接收 props 的方式

TSX
import type { FunctionalComponent } from "vue";

export const LearnJsx: FunctionalComponent = () => {
  // 为 HelloWorld 组件传递 name 属性和 age 属性
  return <HelloWorld name="张三" age={20} />;
};

interface Props {
  name: string;
  age: number;
}

export const HelloWorld: FunctionalComponent<Props> = (props) => {
  // 通过函数参数的方式接收 props 对象
  return (
    <div>
      {props.name} {props.age}
    </div>
  );
};

(13) 函数式组件中使用插槽的方式

TSX
import type { FunctionalComponent } from "vue";

export const LearnJsx: FunctionalComponent = (props, context) => {
  return (
    <div>
      {context.slots.header?.()}
      {context.slots.footer?.()}
    </div>
  );
};

<template>
  <LearnJsx name="张三">
    <template #header> 我将被插入到头部 </template>
    <template #footer> 我将被插入到底部 </template>
  </LearnJsx>
</template>

(14) 函数式组件中使用自定义事件的方式

TSX
import type { FunctionalComponent } from "vue";

export const LearnJsx: FunctionalComponent<
  {},
  { testEventName: (obj: { name: string }) => void }
> = (props, context) => {
  return (
    <button
      onClick={() => {
        context.emit("testEventName", { name: "张三" });
      }}
    >
      emit
    </button>
  );
};

<!-- 测试代码 -->
<script setup lang="ts">
import { LearnJsx } from "./test/LearnJsx";

function onTestEventName(data: { name: string }) {
  console.log(data);
}
</script>

<template>
  <LearnJsx @test-event-name="onTestEventName" />
</template>