diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 58d0efa601..f010af0129 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -12,9 +12,9 @@ title: "普通组件（例如 <div>）"
 
 ---
 
-## 参考 {/*reference*/}
+## 参考 {/*reference*/}
 
-### 通用组件 (例如 `<div>`) {/*common*/}
+### 通用组件 (例如 `<div>`) {/*common*/}
 
 ```js
 <div className="wrapper">一些内容</div>
@@ -22,7 +22,7 @@ title: "普通组件（例如 <div>）"
 
 [查看更多用例](#usage)。
 
-#### Props {/*common-props*/}
+#### Props {/*common-props*/}
 
 这些特殊的 React 属性适用于所有内置组件：
 
@@ -176,7 +176,7 @@ title: "普通组件（例如 <div>）"
 * [`onToggle`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLDetailsElement/toggle_event)：一个 [`Event` 处理](#event-handler) 函数。当用户切换详细信息时触发。
 * `onToggleCapture`:一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events) 触发的 `onToggle` 版本。
 
-这些事件会触发在 [`<img>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img)、[`<iframe>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)，[`<object>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object)，[`<embed>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed)，[`<link>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link)，和 [SVG `<image>`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/SVG_Image_Tag) 元素。与浏览器事件不同，React 中的事件会冒泡：
+这些事件会触发在 [`<img>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img)、[`<iframe>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)、[`<object>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object)、[`<embed>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed)、[`<link>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link) 和 [SVG `<image>`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/SVG_Image_Tag) 元素。与浏览器事件不同，React 中的事件会冒泡：
 
 
 * `onLoad`：一个 [`Event` 处理](#event-handler) 函数。与浏览器事件不同，React 中的事件会冒泡：
@@ -235,14 +235,14 @@ title: "普通组件（例如 <div>）"
 * [`onWaiting`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/waiting_event)：一个 [`Event` 处理](#event-handler) 函数。由于临时缺少数据而导致播放停止时触发。
 * `onWaitingCapture`：一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events) 触发的 `onWaiting` 版本。
 
-#### 注意事项 {/*common-caveats*/}
+#### 注意事项 {/*common-caveats*/}
 
 - 你不能同时传递 `children` 和 `dangerouslySetInnerHTML`。
 - 有些事件(像 `onAbort` 和 `onLoad`) 在浏览器中不冒泡，但是在 React 中冒泡。
 
 ---
 
-### `ref` 回调函数 {/*ref-callback*/}
+### `ref` 回调函数 {/*ref-callback*/}
 
 你可以将一个函数传递给`ref` 属性，而不是像 [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)) 返回的那样使用 ref 对象。
 
@@ -256,17 +256,17 @@ title: "普通组件（例如 <div>）"
 
 当你传递不同的` ref `回调时，React 也会调用你的 `ref` 回调。在上面的示例中，`(node) => { ... }` 在每次渲染时都是一个不同的函数。当组件重新渲染时，先前的函数将被调用并带有 `null` 参数，并且下一个函数将被调用并带有 DOM 节点。
 
-#### 参数 {/*ref-callback-parameters*/}
+#### 参数 {/*ref-callback-parameters*/}
 
 * `node`：一个 DOM 节点或`null`。当 ref 被附加时 React 会将 DOM 节点传递给你，当引用被分离时值为 `null`。除非你在每次渲染时都传递相同的函数引用作为 `ref` 回调，否则该回调将在组件的每次重新渲染期间被暂时分离和重新连接。
 
-#### 返回 {/*returns*/}
+#### 返回 {/*returns*/}
 
 不要从 `ref` 回调函数中返回任何内容。
 
 ---
 
-### React 事件对象 {/*react-event-object*/}
+### React 事件对象 {/*react-event-object*/}
 
 你的事件处理程序将接收到一个 React 事件对象。它有时也被称为“合成事件”（synthetic event）。
 
@@ -280,7 +280,7 @@ title: "普通组件（例如 <div>）"
 
 一些 React 事件不能直接映射到浏览器的原生事件。例如，在 `onMouseLeave` 事件中，`e.nativeEvent` 将指向 `mouseout` 事件。具体的映射关系不是公共 API 的一部分，可能会在未来发生变化。如果你需要某些原因下层浏览器事件，请从 `e.nativeEvent` 中读取它。
 
-#### 属性 {/*react-event-object-properties*/}
+#### 属性 {/*react-event-object-properties*/}
 
 React 事件对象实现了一些标准的[`事件`](https://developer.mozilla.org/zh-CN/docs/Web/API/Event)属性：
 
@@ -297,7 +297,7 @@ React 事件对象实现了一些标准的[`事件`](https://developer.mozilla.o
 
 * `nativeEvent`：一个 DOM[`事件`](https://developer.mozilla.org/zh-CN/docs/Web/API/Event)。原始的浏览器事件对象。
 
-#### 方法 {/*react-event-object-methods*/}
+#### 方法 {/*react-event-object-methods*/}
 
 React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.org/zh-CN/docs/Web/API/Event) 方法：
 
@@ -311,13 +311,13 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 * `persist()`：不适用于 React DOM。在 React Native 中，调用此函数以读取事件后的属性。
 * `isPersistent()`：不适用于 React DOM。在 React Native 中，返回是否已调用 `persist`。
 
-#### 注意事项 {/*react-event-object-caveats*/}
+#### 注意事项 {/*react-event-object-caveats*/}
 
 * `currentTarget`、`eventPhase`、`target` 和 `type` 的值反映了你的 React 代码所期望的值。在幕后，React 在根处附加事件处理程序，但这不会反映在 React 事件对象中。例如，e.currentTarget 可能与底层 e.nativeEvent.currentTarget 不同。对于 polyfill 的事件，e.type（React 事件类型）可能与 e.nativeEvent.type（底层类型）不同。
 
 ---
 
-### `AnimationsEvent` 处理函数 {/*animationsevent-handler*/}
+### `AnimationsEvent` 处理函数 {/*animationsevent-handler*/}
 
 一个用于 [CSS 动画](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations) 事件的事件处理程序类型。
 
@@ -329,7 +329,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 />
 ```
 
-#### 参数 {/*animationevent-handler-parameters*/}
+#### 参数 {/*animationevent-handler-parameters*/}
 
 * `e`：带有这些额外 [`animationevent`](https://developer.mozilla.org/zh-CN/docs/Web/API/animationevent) 属性的 [React事件对象](#react-event-object)：
   * [`animationName`](https://developer.mozilla.org/zh-CN/docs/Web/API/animationevent/animationName)
@@ -338,7 +338,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `ClipboardEvent` 处理函数 {/*clipboadevent-handler*/}
+### `ClipboardEvent` 处理函数 {/*clipboadevent-handler*/}
 
 一个用于 [Clipboard_API](https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API) 事件的处理程序类型。
 
@@ -350,7 +350,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 />
 ```
 
-#### 参数 {/*clipboadevent-handler-parameters*/}
+#### 参数 {/*clipboadevent-handler-parameters*/}
 
 * `e`：一个带有这些额外 [`ClipboardEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent) 属性的 [React事件对象](#react-event-object)：
 
@@ -358,7 +358,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `CompositionEvent` 处理函数 {/*compositionevent-handler*/}
+### `CompositionEvent` 处理函数 {/*compositionevent-handler*/}
 
 一个用于 [输入法编辑器（IME）](https://developer.mozilla.org/zh-CN/docs/Glossary/Input_method_editor) 的事件处理程序类型。
 
@@ -370,14 +370,14 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 />
 ```
 
-#### 参数 {/*compositionevent-handler-parameters*/}
+#### 参数 {/*compositionevent-handler-parameters*/}
 
 * `e`:一个具有这些额外[`CompositionEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/CompositionEvent) 属性的 React 事件对象
   * [`data`](https://developer.mozilla.org/zh-CN/docs/Web/API/CompositionEvent/data)
 
 ---
 
-### `DragEvent` 处理 {/*dragevent-handler*/}
+### `DragEvent` 处理 {/*dragevent-handler*/}
 
  一个 [HTML Drag 和 Drop API] (https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API) 事件的一个事件处理程序类型。
 
@@ -402,7 +402,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 </>
 ```
 
-#### 参数 {/*dragevent-handler-parameters*/}
+#### 参数 {/*dragevent-handler-parameters*/}
 
 * `e`:一个带有这些额外的 [`DragEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent) 属性的 [React事件对象](#react-event-object)：
   * [`dataTransfer`](https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent/dataTransfer)
@@ -433,7 +433,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `FocusEvent` 处理函数 {/*focusevent-handler*/}
+### `FocusEvent` 处理函数 {/*focusevent-handler*/}
 
  一个用于焦点事件的事件处理程序类型。
  
@@ -446,7 +446,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 [看一个例子](#handling-focus-events)。
 
-#### 参数 {/*focusevent-handler-parameters*/}
+#### 参数 {/*focusevent-handler-parameters*/}
 
 * `e`：一个有额外 [`FocusEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/FocusEvent) 属性的 [React事件对象](#react-event-object):
   * [`relatedTarget`](https://developer.mozilla.org/zh-CN/docs/Web/API/FocusEvent/relatedTarget)
@@ -458,17 +458,17 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `Event` 处理函数 {/*event-handler*/}
+### `Event` 处理函数 {/*event-handler*/}
 
 一个通用事件的事件处理程序类型。
 
-#### 参数 {/*event-handler-parameters*/}
+#### 参数 {/*event-handler-parameters*/}
 
 * `e`:一个没有额外属性的 [React 事件对象](#react-event-object)。
 
 ---
 
-### `InputEvent` 处理函数 {/*inputevent-handler*/}
+### `InputEvent` 处理函数 {/*inputevent-handler*/}
 
 一个用于 `onBeforeInput` 事件的事件处理程序类型。
 
@@ -476,14 +476,14 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 <input onBeforeInput={e => console.log('onBeforeInput')} />
 ```
 
-#### 属性 {/*inputevent-handler-parameters*/}
+#### 属性 {/*inputevent-handler-parameters*/}
 
 * `e`：一个带有这些额外 [`InputEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent) 属性的 [React 事件对象](#react-event-object)：
   * [`data`](https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/data)
 
 ---
 
-### `KeyboardEvent` 处理函数 {/*keyboardevent-handler*/}
+### `KeyboardEvent` 处理函数 {/*keyboardevent-handler*/}
 
 一个用于键盘事件的事件处理程序类型。
 
@@ -496,7 +496,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 [看一个例子](#handling-keyboard-events)。
 
-#### 参数 {/*keyboardevent-handler-parameters*/}
+#### 参数 {/*keyboardevent-handler-parameters*/}
 
 * `e`：一个带有这些额外的 [`KeyboardEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent) 属性的 [React event object](#react-event-object)：
   * [`altKey`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/altKey)
@@ -520,7 +520,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `MouseEvent` 处理函数 {/*mouseevent-handler*/}
+### `MouseEvent` 处理函数 {/*mouseevent-handler*/}
 
 一个用于鼠标事件的事件处理程序类型。
 
@@ -537,7 +537,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 [看一个例子](#handling-mouse-events)。
 
-#### 参数 {/*mouseevent-handler-parameters*/}
+#### 参数 {/*mouseevent-handler-parameters*/}
 
 * `e`：一个具有这些额外 [`鼠标事件`](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent) 属性的 [React event object](#react-event-object)：
   * [`altKey`](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/altKey)
@@ -564,7 +564,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `PointerEvent` 处理函数 {/*pointerevent-handler*/}
+### `PointerEvent` 处理函数 {/*pointerevent-handler*/}
 
 一个 [pointer events](https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events) 的事件处理程序类型。
 
@@ -580,7 +580,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 [看一个例子](#handling-pointer-events)。
 
-#### 参数 {/*pointerevent-handler-parameters*/}
+#### 参数 {/*pointerevent-handler-parameters*/}
 
 * `e`：具有这些额外 [`PointerEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/PointerEvent) 属性的 [React event object](#react-event-object)：
   * [`height`](https://developer.mozilla.org/zh-CN/docs/Web/API/PointerEvent/height)
@@ -620,7 +620,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `TouchEvent` 处理函数 {/*touchevent-handler*/}
+### `TouchEvent` 处理函数 {/*touchevent-handler*/}
 
  一个用于 [touch events](https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events) 的事件处理程序类型。
 
@@ -633,7 +633,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 />
 ```
 
-#### 参数 {/*touchevent-handler-parameters*/}
+#### 参数 {/*touchevent-handler-parameters*/}
 
 * `e`：一个带有这些额外的 [`TouchEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent) 属性的 [React event object](#react-event-object)：
   * [`altKey`](https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent/altKey)
@@ -652,7 +652,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `TransitionEvent` 处理函数 {/*transitionevent-handler*/}
+### `TransitionEvent` 处理函数 {/*transitionevent-handler*/}
 
 一个用于 CSS 过渡的事件处理程序类型。
 
@@ -662,7 +662,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 />
 ```
 
-#### 参数 {/*transitionevent-handler-parameters*/}
+#### 参数 {/*transitionevent-handler-parameters*/}
 
 * `e`：一个带有这些额外 [`TransitionEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/TransitionEvent) 属性的 [React 事件对象](#react-event-object)：
   * [`elapsedTime`](https://developer.mozilla.org/zh-CN/docs/Web/API/TransitionEvent/elapsedTime)
@@ -671,7 +671,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `UIEvent` 处理函数 {/*uievent-handler*/}
+### `UIEvent` 处理函数 {/*uievent-handler*/}
 
  一个通用 UI 事件的事件处理程序类型。
 
@@ -681,7 +681,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 />
 ```
 
-#### 参数 {/*uievent-handler-parameters*/}
+#### 参数 {/*uievent-handler-parameters*/}
 
 * `e`:一个带有这些额外 [`UIEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent) 属性的 [React 事件对象](#react-event-object)：
   * [`detail`](https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent/detail)
@@ -689,7 +689,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-### `WheelEvent` 处理函数 {/*wheelevent-handler*/}
+### `WheelEvent` 处理函数 {/*wheelevent-handler*/}
 
 一个用于 `onWheel` 事件的事件处理程序类型。
 
@@ -699,7 +699,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 />
 ```
 
-#### 参数 {/*wheelevent-handler-parameters*/}
+#### 参数 {/*wheelevent-handler-parameters*/}
 
 * `e`:带有这些额外 [`WheelEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/WheelEvent) 属性的 [React 事件对象](#react-event-object)：
   * [`deltaMode`](https://developer.mozilla.org/zh-CN/docs/Web/API/WheelEvent/deltaMode)
@@ -734,9 +734,9 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
 
 ---
 
-## Usage {/*usage*/}
+## Usage {/*usage*/}
 
-### 应用 CSS 样式 {/*applying-css-styles*/}
+### 应用 CSS 样式 {/*applying-css-styles*/}
 
 在 React 中，你可以使用 [`className`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/className) 指定 CSS 类。它的工作方式类似于 HTML 中的 `class` 属性：
 
@@ -812,7 +812,7 @@ export default function Avatar({ user }) {
 
 <DeepDive>
 
-#### 如何有条件地应用多个 CSS 类？ {/*how-to-apply-multiple-css-classes-conditionally*/}
+#### 如何有条件地应用多个 CSS 类？ {/*how-to-apply-multiple-css-classes-conditionally*/}
 
 要有条件地应用 CSS 类，你需要使用 JavaScript 自己生成 `className` 字符串。
 
@@ -854,7 +854,7 @@ function Row({ isSelected, size }) {
 
 ---
 
-### 使用 ref 操作 DOM 节点 {/*manipulating-a-dom-node-with-a-ref*/}
+### 使用 ref 操作 DOM 节点 {/*manipulating-a-dom-node-with-a-ref*/}
 
 有时候，你需要获取与 JSX 标签相关联的浏览器 DOM 节点。举个例子，当你希望在点击一个按钮的时候聚焦一个 `<input>`，你需要在浏览器的`<input>` DOM 节点上调用 [`focus()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/focus) 方法。
 
@@ -904,7 +904,7 @@ export default function Form() {
 
 ---
 
-### 危险地设置内部 HTML {/*dangerously-setting-the-inner-html*/}
+### 危险地设置内部 HTML {/*dangerously-setting-the-inner-html*/}
 
 你可以像这样将原始的 HTML 字符串传递给元素:
 
@@ -1002,7 +1002,7 @@ HTML 中嵌入的代码将会运行。黑客可以利用这个安全漏洞窃取
 
 ---
 
-### 处理鼠标事件 {/*handling-mouse-events*/}
+### 处理鼠标事件 {/*handling-mouse-events*/}
 
 这个例子展示了一些常见的 [鼠标事件](#mouseevent-handler) 以及它们触发的时机。
 
@@ -1049,7 +1049,7 @@ input { margin-left: 10px; }
 
 ---
 
-### 处理指针事件 {/*handling-pointer-events*/}
+### 处理指针事件 {/*handling-pointer-events*/}
 
 这个例子展示了一些常见的 [指针事件](#pointerevent-handler) 以及它们触发的时机。
 
@@ -1097,7 +1097,7 @@ input { margin-left: 10px; }
 
 ---
 
-### 处理焦点事件 {/*handling-focus-events*/}
+### 处理焦点事件 {/*handling-focus-events*/}
 
 在 React 中，[焦点事件](#focusevent-handler) 冒泡。你可以使用 `currentTarget` 和 `relatedTarget` 来区分焦点或模糊事件是否起源于父元素之外。该示例展示了如何检测子元素的聚焦、父级元素的聚焦，以及如何检测整个子树的聚焦进入或离开。
 
@@ -1153,7 +1153,7 @@ input { margin-left: 10px; }
 
 ---
 
-### 处理键盘事件 {/*handling-keyboard-events*/}
+### 处理键盘事件 {/*handling-keyboard-events*/}
 
 这个例子展示了一些常见的 [键盘事件](#keyboardevent-handler) 以及它们触发的时机。