18 lines
533 B
TypeScript
18 lines
533 B
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import { useState, useEffect, type ReactNode } from 'react'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* ClientOnly组件
|
|||
|
|
* 该组件专门用于包装那些只能在客户端渲染的内容，避免水合不匹配错误
|
|||
|
|
* 例如：使用了Date.now()或window对象的组件
|
|||
|
|
*/
|
|||
|
|
export default function ClientOnly({ children, fallback = null }: { children: ReactNode, fallback?: ReactNode }) {
|
|||
|
|
const [isClient, setIsClient] = useState(false)
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setIsClient(true)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
return isClient ? <>{children}</> : <>{fallback}</>
|
|||
|
|
}
|