---
title: "使用 React 标记视图"
description: "在 Tiptap 中使用 React 构建自定义标记视图。"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/mark-views/react"
---

# 使用 React 标记视图

在 Tiptap 中使用 React 构建自定义标记视图。

如果你习惯于使用 React，使用原生 JavaScript 可能会感觉复杂。好消息是：你也可以在标记视图中使用常规的 React 组件。只需要了解一点点内容，让我们逐步来看看。

## 渲染一个 React 组件

在编辑器中渲染 React 组件，需要执行以下操作：

1. [创建一个标记扩展](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/create-new/mark.md)
2. 创建一个 React 组件
3. 将该组件传递给提供的 `ReactNodeViewRenderer`
4. 使用 `addMarkView()` 注册它
5. [配置 Tiptap 使用你的新节点扩展](https://tiptap.zhcndoc.com/editor/getting-started/configure.md)

下面是你的节点扩展可能的写法：

```ts
import { Mark } from '@tiptap/core'
import { ReactMarkViewRenderer } from '@tiptap/react'

import Component from './Component.jsx'

export default Mark.create({
  // 选项…

  addMarkView() {
    return ReactMarkViewRenderer(Component)
  },
})
```

以下是一个 React 组件示例：

```tsx
import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
import React from 'react'

export default (props: MarkViewRendererProps) => {
  const [count, setCount] = React.useState(0)

  return (
    <span className="content" data-test-id="mark-view">
      <MarkViewContent />
      <label contentEditable={false}>
        React 组件：
        <button
          onClick={() => {
            setCount(count + 1)
          }}
        >
          这个按钮已被点击 {count} 次。
        </button>
      </label>
    </span>
  )
}
```

明白了吗？让我们看看实际效果。欢迎复制下面的示例开始使用。

> **Interactive demo:** [ReactComponent](https://embed.tiptap.dev/preview/GuideMarkViews/ReactComponent?inline=false\&hideSource=false)

## 更新标记视图属性

更新标记视图的属性非常简单。您可以使用 `MarkViewRendererProps` 提供的 `updateAttributes` 方法来更新标记视图的属性。

```tsx
import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
import React from 'react'

export default (props: MarkViewRendererProps) => {
  return (
    <span id={props.HTMLAttributes.id}>
      <MarkViewContent />
      <button onClick={() => props.updateAttributes({ id: Date.now() })}>Update ID</button>
    </span>
  )
}
```