---
title: "JSX"
description: "使用 JSX 来控制您的扩展如何渲染为 HTML。"
canonical_url: "https://tiptap.zhcndoc.com/editor/api/utilities/jsx"
---

# JSX

使用 JSX 来控制您的扩展如何渲染为 HTML。

在创建自定义扩展时，您通常需要定义它们如何渲染为 HTML。通常，可以通过定义一个 `renderHTML` 函数来完成，该函数返回 Prosemirror 渲染数组，包括标签名称、属性和内容孔。

使用 Tiptap 的 JSX 渲染器，您可以使用 JSX 来定义您的扩展应如何渲染。

> **Interactive demo:** [JSX](https://embed.tiptap.dev/preview/Examples/JSX)

## 在扩展中使用 JSX

要在扩展中使用 JSX，您需要一个可以处理 **JSX** 或 **TSX** 文件的打包工具，比如 Vite 或 Webpack。大多数框架，如 Next.js、Remix 或 Nuxt，应该已经能够处理这个问题。

如果没有其他配置，默认使用 React 的 JSX 运行时。这在您尝试在非 React 环境中使用 JSX（如 Tiptap 扩展）时会导致问题。

为了处理这个问题，您可以在文件顶部添加一条注释，以指定打包工具应使用哪个 JSX 运行时。Tiptap 附带了来自 `@tiptap/core` 的自己的打包工具。

```jsx
/** @jsxImportSource @tiptap/core */

// 在此处编写您的代码
```

## 在 `renderHTML` 函数中编写 JSX

现在，打包工具应该能够为 Tiptap 处理 JSX，您可以在 `renderHTML` 函数中使用 JSX。

```jsx
/** @jsxImportSource @tiptap/core */

import { Node } from '@tiptap/core'

const MyNode = Node.create({
  // ... 您的节点配置

  renderHTML({ HTMLAttributes }) {
    return (
      <div {...HTMLAttributes}>
        <p>这是您的自定义节点。这里是您的内容孔：</p>
        <slot />
      </div>
    )
  }
})
```

`<slot />` 标签用于通过 JSX 定义 Prosemirror 的内容孔。这是您的可编辑内容将被渲染的位置。

**注意**，这并没有使用任何组件库，如 React 或 Vue 的底层实现，并且不会支持钩子、状态或其他特定于库的功能。