我有一个接受一些参数的定制 backbone 组件,但我不明白为什么使用它会导致水合错误:"未捕获的错误:水合失败,因为初始UI与服务器上呈现的不匹配。"
- backbone . tsx**
interface SkeletonProps {
width?: number;
height?: number;
count?: number;
className?: string;
style?: React.CSSProperties;
inline?: boolean;
}
export default function Skeleton({className, width, height, count, style, inline} : SkeletonProps) {
const skeletonStyles = {
width: width ? `${width}px` : '100%',
height: height ? `${height}px` : '',
}
return (
<>
{ Array(count ? count : 1).fill(0).map(item=> {
return (
<>
<div className={`skeleton ${className ? className : ''}`} style={{...skeletonStyles, ...style}}>
</div>
{inline ? '' : <br />}
</>
)
}) }
</>
)
}
- 用法示例**
<Skeleton height={190} />
我尝试从中删除自定义参数,但没有成功。
1条答案
按热度按时间14ifxucb1#
尝试使用
NoSsr
,例如npm参考https://www.npmjs.com/package/react-no-ssr
希望能有所帮助。