From 8388afcb4d22aa92790fd0e830217e1c3febb617 Mon Sep 17 00:00:00 2001 From: assassinationss Date: Fri, 25 Sep 2026 03:18:36 +0800 Subject: [PATCH 1/2] [zh-Hans] translate API docs: utils and components (15) --- .../ImpressionArea/zh-Hans/ImpressionArea.md | 100 ++++++++++++++++++ .../components/Separated/zh-Hans/Separated.md | 53 ++++++++++ .../SwitchCase/zh-Hans/SwitchCase.md | 63 +++++++++++ .../buildContext/zh-Hans/buildContext.md | 73 +++++++++++++ .../zh-Hans/disableBodyScrollLock.md | 30 ++++++ .../zh-Hans/enableBodyScrollLock.md | 30 ++++++ .../zh-Hans/getKeyboardHeight.md | 38 +++++++ .../zh-Hans/getSafeAreaInset.md | 70 ++++++++++++ .../src/utils/isAndroid/zh-Hans/isAndroid.md | 45 ++++++++ .../src/utils/isIOS/zh-Hans/isIOS.md | 46 ++++++++ .../zh-Hans/isKeyboardVisible.md | 38 +++++++ .../src/utils/isServer/zh-Hans/isServer.md | 33 ++++++ .../utils/mergeProps/zh-Hans/mergeProps.md | 38 +++++++ .../src/utils/mergeRefs/zh-Hans/mergeRefs.md | 55 ++++++++++ .../zh-Hans/subscribeKeyboardHeight.md | 87 +++++++++++++++ 15 files changed, 799 insertions(+) create mode 100644 packages/react-simplikit/src/components/ImpressionArea/zh-Hans/ImpressionArea.md create mode 100644 packages/react-simplikit/src/components/Separated/zh-Hans/Separated.md create mode 100644 packages/react-simplikit/src/components/SwitchCase/zh-Hans/SwitchCase.md create mode 100644 packages/react-simplikit/src/utils/buildContext/zh-Hans/buildContext.md create mode 100644 packages/react-simplikit/src/utils/disableBodyScrollLock/zh-Hans/disableBodyScrollLock.md create mode 100644 packages/react-simplikit/src/utils/enableBodyScrollLock/zh-Hans/enableBodyScrollLock.md create mode 100644 packages/react-simplikit/src/utils/getKeyboardHeight/zh-Hans/getKeyboardHeight.md create mode 100644 packages/react-simplikit/src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md create mode 100644 packages/react-simplikit/src/utils/isAndroid/zh-Hans/isAndroid.md create mode 100644 packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md create mode 100644 packages/react-simplikit/src/utils/isKeyboardVisible/zh-Hans/isKeyboardVisible.md create mode 100644 packages/react-simplikit/src/utils/isServer/zh-Hans/isServer.md create mode 100644 packages/react-simplikit/src/utils/mergeProps/zh-Hans/mergeProps.md create mode 100644 packages/react-simplikit/src/utils/mergeRefs/zh-Hans/mergeRefs.md create mode 100644 packages/react-simplikit/src/utils/subscribeKeyboardHeight/zh-Hans/subscribeKeyboardHeight.md diff --git a/packages/react-simplikit/src/components/ImpressionArea/zh-Hans/ImpressionArea.md b/packages/react-simplikit/src/components/ImpressionArea/zh-Hans/ImpressionArea.md new file mode 100644 index 00000000..66fb08f0 --- /dev/null +++ b/packages/react-simplikit/src/components/ImpressionArea/zh-Hans/ImpressionArea.md @@ -0,0 +1,100 @@ +# ImpressionArea + +`ImpressionArea` 是一个测量特定 DOM 元素在屏幕上可见时长、并在元素进入或离开视口时执行回调的组件。该组件使用 `useImpressionRef` Hook 来跟踪元素的可见性。 + +## 接口 + +```ts +function ImpressionArea( + as: T = 'div', + rootMargin?: string, + areaThreshold?: number, + timeThreshold?: number, + onImpressionStart?: () => void, + onImpressionEnd?: () => void, + ref?: Ref>, + children?: React.ReactNode, + className?: string +): JSX.Element; +``` + +### 参数 + + + + + + + + + + + + + + + + + + + +### 返回值 + + + +## 示例 + +```tsx +function App() { + return ( + console.log('Element entered view')} + onImpressionEnd={() => console.log('Element exited view')} + timeThreshold={1000} + areaThreshold={0.5} + > +
Track me!
+ + ); +} +``` diff --git a/packages/react-simplikit/src/components/Separated/zh-Hans/Separated.md b/packages/react-simplikit/src/components/Separated/zh-Hans/Separated.md new file mode 100644 index 00000000..3150e05e --- /dev/null +++ b/packages/react-simplikit/src/components/Separated/zh-Hans/Separated.md @@ -0,0 +1,53 @@ +# Separated + +`Separated` 是一个在各个子元素之间插入指定组件的组件。适合用于在列表中添加分隔符、间距或其他重复出现的元素。 + +## 接口 + +```ts +function Separated(children: React.ReactNode, by: React.ReactNode): JSX.Element; +``` + +### 参数 + + + + + +### 返回值 + + + +## 示例 + +```tsx +function App() { + return ( + }> + {['hello', 'react', 'world'].map(item => ( +
{item}
+ ))} + + ); + // Expected output: + //
hello
+ // + //
react
+ // + //
world
+} +``` diff --git a/packages/react-simplikit/src/components/SwitchCase/zh-Hans/SwitchCase.md b/packages/react-simplikit/src/components/SwitchCase/zh-Hans/SwitchCase.md new file mode 100644 index 00000000..037546e0 --- /dev/null +++ b/packages/react-simplikit/src/components/SwitchCase/zh-Hans/SwitchCase.md @@ -0,0 +1,63 @@ +# SwitchCase + +`SwitchCase` 是一个让你根据给定值以声明式方式渲染组件的组件，类似 `switch-case` 语句。当你需要根据特定状态条件渲染不同组件时很有用。 + +## 接口 + +```ts +function SwitchCase( + value: Case, + caseBy: Partial<{ [P in StringifiedValue]: () => ReactElement | null }>, + defaultComponent?: () => ReactElement | null +): ReactElement | null; +``` + +### 参数 + + + + + + + +### 返回值 + + + +## 示例 + +```tsx +function App() { + return ( + , + b: () => , + c: () => , + }} + // Renders Default when the status value does not match any case. + defaultComponent={() => } + /> + ); +} +``` diff --git a/packages/react-simplikit/src/utils/buildContext/zh-Hans/buildContext.md b/packages/react-simplikit/src/utils/buildContext/zh-Hans/buildContext.md new file mode 100644 index 00000000..1af0c594 --- /dev/null +++ b/packages/react-simplikit/src/utils/buildContext/zh-Hans/buildContext.md @@ -0,0 +1,73 @@ +# buildContext + +`buildContext` 是一个减少定义 React Context 时重复代码的辅助函数。 + +## 接口 + +```ts +function buildContext( + contextName: string, + defaultContextValues?: ContextValuesType +): [ + Provider: (props: ProviderProps) => JSX.Element, + useContext: () => ContextValuesType, +]; +``` + +### 参数 + + + + + +### 返回值 + + + +## 示例 + +```tsx +const [Provider, useContext] = buildContext<{ title: string }>('TestContext', { + title: 'Default title', +}); + +function Inner() { + const { title } = useContext(); + return
{title}
; +} + +function Page() { + return ( + + + + ); +} +``` diff --git a/packages/react-simplikit/src/utils/disableBodyScrollLock/zh-Hans/disableBodyScrollLock.md b/packages/react-simplikit/src/utils/disableBodyScrollLock/zh-Hans/disableBodyScrollLock.md new file mode 100644 index 00000000..74af0702 --- /dev/null +++ b/packages/react-simplikit/src/utils/disableBodyScrollLock/zh-Hans/disableBodyScrollLock.md @@ -0,0 +1,30 @@ +# disableBodyScrollLock + +`disableBodyScrollLock` 是一个解除 body 滚动锁定的工具函数。它会恢复被 `enableBodyScrollLock` 锁定的滚动，并回到保存的滚动位置。 + +在 SSR 环境中调用是安全的（在服务端为空操作）。 +未锁定时调用同样安全（空操作）。 + +## 接口 + +```ts +function disableBodyScrollLock(): void; +``` + +### 参数 + +此函数不接受任何参数。 + +### 返回值 + +此函数不返回任何值。 + +## 示例 + +```tsx +// When modal opens +enableBodyScrollLock(); + +// When modal closes +disableBodyScrollLock(); +``` diff --git a/packages/react-simplikit/src/utils/enableBodyScrollLock/zh-Hans/enableBodyScrollLock.md b/packages/react-simplikit/src/utils/enableBodyScrollLock/zh-Hans/enableBodyScrollLock.md new file mode 100644 index 00000000..0d8a0108 --- /dev/null +++ b/packages/react-simplikit/src/utils/enableBodyScrollLock/zh-Hans/enableBodyScrollLock.md @@ -0,0 +1,30 @@ +# enableBodyScrollLock + +`enableBodyScrollLock` 是一个锁定 body 滚动的工具函数。它通过应用固定定位来阻止 body 滚动，在打开模态框、抽屉或其他覆盖层组件时很有用。 + +在 SSR 环境中调用是安全的（在服务端为空操作）。 +在解除锁定之前，重复调用不会产生额外效果。 + +## 接口 + +```ts +function enableBodyScrollLock(): void; +``` + +### 参数 + +此函数不接受任何参数。 + +### 返回值 + +此函数不返回任何值。 + +## 示例 + +```tsx +// When modal opens +enableBodyScrollLock(); + +// When modal closes +disableBodyScrollLock(); +``` diff --git a/packages/react-simplikit/src/utils/getKeyboardHeight/zh-Hans/getKeyboardHeight.md b/packages/react-simplikit/src/utils/getKeyboardHeight/zh-Hans/getKeyboardHeight.md new file mode 100644 index 00000000..90876ec5 --- /dev/null +++ b/packages/react-simplikit/src/utils/getKeyboardHeight/zh-Hans/getKeyboardHeight.md @@ -0,0 +1,38 @@ +# getKeyboardHeight + +`getKeyboardHeight` 是一个返回当前屏幕键盘高度（以像素为单位）的工具函数。 + +该函数使用 Visual Viewport API 计算键盘高度，并假定运行在支持 Visual Viewport 的现代环境中（Safari / WKWebView 14+、Chrome / Android WebView 80+）。 + +键盘高度的计算方式为： +`window.innerHeight - visualViewport.height - visualViewport.offsetTop` + +减去 `offsetTop` 是为了正确处理 iOS 的行为：键盘出现时，视觉视口可能发生垂直位移。 + +## 接口 + +```ts +function getKeyboardHeight(): number; +``` + +### 参数 + +此函数不接受任何参数。 + +### 返回值 + + + +## 示例 + +```tsx +const height = getKeyboardHeight(); + +if (height > 0) { + footer.style.paddingBottom = `${height}px`; +} +``` diff --git a/packages/react-simplikit/src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md b/packages/react-simplikit/src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md new file mode 100644 index 00000000..f2b6678d --- /dev/null +++ b/packages/react-simplikit/src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md @@ -0,0 +1,70 @@ +# getSafeAreaInset + +`getSafeAreaInset` 是一个以对象形式返回所有安全区域内边距（以像素为单位）的工具函数。 + +该函数通过创建一个临时 DOM 元素并读取其计算样式，来获取 CSS `env(safe-area-inset-*)` 的值。 + +安全区域内边距用于为设备特有的 UI 元素留出空间： + +- **top**：刘海、灵动岛或状态栏 +- **bottom**：Face ID 设备上的主屏幕指示条 +- **left/right**：横屏模式下的屏幕圆角 + +典型值（配备 Face ID 的 iPhone，竖屏模式）： + +- top: 47-59px（刘海/灵动岛） +- bottom: 34px（主屏幕指示条） +- left/right: 0px + +## 接口 + +```ts +function getSafeAreaInset(): SafeAreaInset; +``` + +### 参数 + +此函数不接受任何参数。 + +### 返回值 + + + +## 示例 + +```tsx +const { top, bottom, left, right } = getSafeAreaInset(); + +header.style.paddingTop = `${top}px`; +footer.style.paddingBottom = `${bottom}px`; +``` diff --git a/packages/react-simplikit/src/utils/isAndroid/zh-Hans/isAndroid.md b/packages/react-simplikit/src/utils/isAndroid/zh-Hans/isAndroid.md new file mode 100644 index 00000000..1b130678 --- /dev/null +++ b/packages/react-simplikit/src/utils/isAndroid/zh-Hans/isAndroid.md @@ -0,0 +1,45 @@ +# isAndroid + +`isAndroid` 是一个检测当前设备是否运行 Android 的工具函数。 + +注意： + +- 所有 Android 浏览器的 user agent 中都包含 “Android” 字符串。 + +## 接口 + +```ts +function isAndroid(userAgent?: string): boolean; +``` + +### 参数 + + + +### 返回值 + + + +## 示例 + +```tsx +if (isAndroid()) { + // Android-specific code + enableAndroidOptimizations(); +} +``` + +```tsx +// With custom user agent +const isAndroidDevice = isAndroid( + 'Mozilla/5.0 (Linux; Android 12; Pixel 6) Chrome/120' +); +``` diff --git a/packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md b/packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md new file mode 100644 index 00000000..6607cb00 --- /dev/null +++ b/packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md @@ -0,0 +1,46 @@ +# isIOS + +`isIOS` 是一个检测当前设备是否运行 iOS 或 iPadOS 的工具函数。 + +关于平台不一致性的说明： + +- 在 iPadOS 13 之前，iPad 申报的平台为 “iPad”（或在 UA 中匹配 /iPad/）。 +- 从 iPadOS 13 开始，Apple 将平台字符串改为 “MacIntel”，让网站将 iPadOS 当作桌面级 Safari 对待。但这些设备仍然支持多点触控。 + +## 接口 + +```ts +function isIOS(userAgent?: string): boolean; +``` + +### 参数 + + + +### 返回值 + + + +## 示例 + +```tsx +if (isIOS()) { + // iOS-specific code + enableIOSOptimizations(); +} +``` + +```tsx +// With custom user agent +const isIOSDevice = isIOS( + 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)' +); +``` diff --git a/packages/react-simplikit/src/utils/isKeyboardVisible/zh-Hans/isKeyboardVisible.md b/packages/react-simplikit/src/utils/isKeyboardVisible/zh-Hans/isKeyboardVisible.md new file mode 100644 index 00000000..d7b07700 --- /dev/null +++ b/packages/react-simplikit/src/utils/isKeyboardVisible/zh-Hans/isKeyboardVisible.md @@ -0,0 +1,38 @@ +# isKeyboardVisible + +`isKeyboardVisible` 是一个检查屏幕键盘当前是否可见的工具函数。 + +它在内部使用 `getKeyboardHeight()`，当键盘高度大于 0 时返回 `true`。 + +## 接口 + +```ts +function isKeyboardVisible(): boolean; +``` + +### 参数 + +此函数不接受任何参数。 + +### 返回值 + + + +## 示例 + +```tsx +if (isKeyboardVisible()) { + console.log('Keyboard is open'); +} else { + console.log('Keyboard is closed'); +} +``` + +```tsx +// Conditionally show/hide elements based on keyboard visibility +const showFloatingButton = !isKeyboardVisible(); +``` diff --git a/packages/react-simplikit/src/utils/isServer/zh-Hans/isServer.md b/packages/react-simplikit/src/utils/isServer/zh-Hans/isServer.md new file mode 100644 index 00000000..8287747f --- /dev/null +++ b/packages/react-simplikit/src/utils/isServer/zh-Hans/isServer.md @@ -0,0 +1,33 @@ +# isServer + +`isServer` 是一个判断当前代码是否运行在服务端的工具函数。在 `window` 未定义的 SSR（服务端渲染）环境中返回 `true`，在客户端环境中返回 `false`。 + +## 接口 + +```ts +function isServer(): boolean; +``` + +### 参数 + +此函数不接受任何参数。 + +### 返回值 + + + +## 示例 + +```tsx +if (isServer()) { + // SSR-safe code + return null; +} + +// Client-only code +window.addEventListener('resize', handleResize); +``` diff --git a/packages/react-simplikit/src/utils/mergeProps/zh-Hans/mergeProps.md b/packages/react-simplikit/src/utils/mergeProps/zh-Hans/mergeProps.md new file mode 100644 index 00000000..4c6f9671 --- /dev/null +++ b/packages/react-simplikit/src/utils/mergeProps/zh-Hans/mergeProps.md @@ -0,0 +1,38 @@ +# mergeProps + +`mergeProps` 是一个将多个 props 对象合并为单个对象的工具函数。它会处理 `className`、`style` 和 `function` 属性的合并。 + +## 接口 + +```ts +function mergeProps( + ...props: PropsList +): TupleToIntersection; +``` + +### 参数 + + + +### 返回值 + + + +## 示例 + +```tsx +const mergedProps = mergeProps( + { className: 'foo', style: { color: 'red' } }, + { className: 'bar', style: { backgroundColor: 'blue' } } +); +console.log(mergedProps); // { className: 'foo bar', style: { color: 'red', backgroundColor: 'blue' } } +``` diff --git a/packages/react-simplikit/src/utils/mergeRefs/zh-Hans/mergeRefs.md b/packages/react-simplikit/src/utils/mergeRefs/zh-Hans/mergeRefs.md new file mode 100644 index 00000000..f42b3994 --- /dev/null +++ b/packages/react-simplikit/src/utils/mergeRefs/zh-Hans/mergeRefs.md @@ -0,0 +1,55 @@ +# mergeRefs + +`mergeRefs` 接收多个 ref（RefObject 或 RefCallback），返回一个能更新所有传入 ref 的单一 ref。当你需要向单个元素同时传递多个 ref 时很有用。当回调 ref 返回清理函数（React 19）时，合并后的 ref 也会返回一个清理函数，并在卸载时执行所有清理操作。 + +## 接口 + +```ts +function mergeRefs( + ...refs: Array | RefCallback | null | undefined> +): RefCallback; +``` + +### 参数 + + + +### 返回值 + + + +## 示例 + +```tsx +forwardRef(function Component(props, parentRef) { + const myRef = useRef(null); + + return
; +}); +``` + +```tsx +function Component(props) { + const ref = useRef(null); + const eight, setHeight] = useState(0); + + const measuredRef = useCallback(node => { + if (node == null) { + return; + } + + setHeight(node.offsetHeight); + }, []); + + return
; +} +``` diff --git a/packages/react-simplikit/src/utils/subscribeKeyboardHeight/zh-Hans/subscribeKeyboardHeight.md b/packages/react-simplikit/src/utils/subscribeKeyboardHeight/zh-Hans/subscribeKeyboardHeight.md new file mode 100644 index 00000000..be645745 --- /dev/null +++ b/packages/react-simplikit/src/utils/subscribeKeyboardHeight/zh-Hans/subscribeKeyboardHeight.md @@ -0,0 +1,87 @@ +# subscribeKeyboardHeight + +`subscribeKeyboardHeight` 是一个订阅屏幕键盘高度变化的工具函数。 + +每当键盘高度可能变化时（包括键盘出现、消失或尺寸变化），传入的回调都会被调用。 + +在内部，该函数同时监听 Visual Viewport 的 `resize` 和 `scroll` 事件： + +- `resize`：视觉视口高度变化时触发 +- `scroll`：视觉视口偏移变化时触发（对 iOS 很重要，因为视口可能在尺寸不变的情况下发生位移） + +性能优化： + +- 默认节流（16ms，约 60fps），避免回调被过于频繁地调用 +- 高度未变化时跳过回调（去重） + +## 接口 + +```ts +function subscribeKeyboardHeight( + options: SubscribeKeyboardHeightOptions +): SubscribeKeyboardHeightResult; +``` + +### 参数 + + + +### 返回值 + + + +## 示例 + +```tsx +const { unsubscribe } = subscribeKeyboardHeight({ + callback: height => { + footer.style.paddingBottom = `${height}px`; + }, + immediate: true, +}); + +// Later, when cleanup is needed +unsubscribe(); +``` From 45e3ebb7b72624d6413e311a5ec2cdd70b4cc23a Mon Sep 17 00:00:00 2001 From: assassinationss Date: Mon, 28 Sep 2026 01:12:22 +0800 Subject: [PATCH 2/2] docs(zh-Hans): apply review feedback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - restore dropped [h in mergeRefs example to match English source - on detach -> 在分离时 (refs also detach on element swap) - remove spaces around full-width quotes (isAndroid/isIOS) - full-width colon in getSafeAreaInset typical values --- .../src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md | 6 +++--- .../src/utils/isAndroid/zh-Hans/isAndroid.md | 2 +- packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md | 4 ++-- .../src/utils/mergeRefs/zh-Hans/mergeRefs.md | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-simplikit/src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md b/packages/react-simplikit/src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md index f2b6678d..9c081661 100644 --- a/packages/react-simplikit/src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md +++ b/packages/react-simplikit/src/utils/getSafeAreaInset/zh-Hans/getSafeAreaInset.md @@ -12,9 +12,9 @@ 典型值（配备 Face ID 的 iPhone，竖屏模式）： -- top: 47-59px（刘海/灵动岛） -- bottom: 34px（主屏幕指示条） -- left/right: 0px +- top：47-59px（刘海/灵动岛） +- bottom：34px（主屏幕指示条） +- left/right：0px ## 接口 diff --git a/packages/react-simplikit/src/utils/isAndroid/zh-Hans/isAndroid.md b/packages/react-simplikit/src/utils/isAndroid/zh-Hans/isAndroid.md index 1b130678..e4ae8040 100644 --- a/packages/react-simplikit/src/utils/isAndroid/zh-Hans/isAndroid.md +++ b/packages/react-simplikit/src/utils/isAndroid/zh-Hans/isAndroid.md @@ -4,7 +4,7 @@ 注意： -- 所有 Android 浏览器的 user agent 中都包含 “Android” 字符串。 +- 所有 Android 浏览器的 user agent 中都包含“Android”字符串。 ## 接口 diff --git a/packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md b/packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md index 6607cb00..7fcc99b8 100644 --- a/packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md +++ b/packages/react-simplikit/src/utils/isIOS/zh-Hans/isIOS.md @@ -4,8 +4,8 @@ 关于平台不一致性的说明： -- 在 iPadOS 13 之前，iPad 申报的平台为 “iPad”（或在 UA 中匹配 /iPad/）。 -- 从 iPadOS 13 开始，Apple 将平台字符串改为 “MacIntel”，让网站将 iPadOS 当作桌面级 Safari 对待。但这些设备仍然支持多点触控。 +- 在 iPadOS 13 之前，iPad 申报的平台为“iPad”（或在 UA 中匹配 /iPad/）。 +- 从 iPadOS 13 开始，Apple 将平台字符串改为“MacIntel”，让网站将 iPadOS 当作桌面级 Safari 对待。但这些设备仍然支持多点触控。 ## 接口 diff --git a/packages/react-simplikit/src/utils/mergeRefs/zh-Hans/mergeRefs.md b/packages/react-simplikit/src/utils/mergeRefs/zh-Hans/mergeRefs.md index f42b3994..ed9f2b30 100644 --- a/packages/react-simplikit/src/utils/mergeRefs/zh-Hans/mergeRefs.md +++ b/packages/react-simplikit/src/utils/mergeRefs/zh-Hans/mergeRefs.md @@ -1,6 +1,6 @@ # mergeRefs -`mergeRefs` 接收多个 ref（RefObject 或 RefCallback），返回一个能更新所有传入 ref 的单一 ref。当你需要向单个元素同时传递多个 ref 时很有用。当回调 ref 返回清理函数（React 19）时，合并后的 ref 也会返回一个清理函数，并在卸载时执行所有清理操作。 +`mergeRefs` 接收多个 ref（RefObject 或 RefCallback），返回一个能更新所有传入 ref 的单一 ref。当你需要向单个元素同时传递多个 ref 时很有用。当回调 ref 返回清理函数（React 19）时，合并后的 ref 也会返回一个清理函数，并在分离时执行所有清理操作。 ## 接口 @@ -40,7 +40,7 @@ forwardRef(function Component(props, parentRef) { ```tsx function Component(props) { const ref = useRef(null); - const eight, setHeight] = useState(0); + const [height, setHeight] = useState(0); const measuredRef = useCallback(node => { if (node == null) {