仅客户端渲染

查看源代码

用于仅在客户端渲染内容。

演示

import { ClientOnly } from "@resolid/react-ui";

export default function App() {
  return <ClientOnly>此内容仅在客户端渲染。</ClientOnly>;
}

用法

import { ClientOnly } from "@resolid/react-ui";
<ClientOnly>
  <ColorModeButton />
</ClientOnly>

举例

Fallback

使用 fallback 属性，在客户端内容准备期间渲染加载状态。

import { ClientOnly } from "@resolid/react-ui";
import { useEffect, useState } from "react";

function Clock() {
  const [time, setTime] = useState(() => new Date().toLocaleTimeString());

  useEffect(() => {
    const interval = window.setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => window.clearInterval(interval);
  }, []);

  return <p className="text-right tabular-nums">当前时间: {time}</p>;
}

export default function App() {
  return (
    <div className="flex flex-col">
      <ClientOnly fallback={<div className="h-14 w-35 rounded-md bg-bg-subtlest" />}>
        <p>客户端时钟</p>
        <Clock />
      </ClientOnly>
    </div>
  );
}

渲染属性模式

当组件需要访问仅限浏览器环境的 API（如 window、document 或 localStorage）时，请使用渲染属性模式，以避免服务端渲染问题

import { ClientOnly } from "@resolid/react-ui";

export default function App() {
  return (
    <ClientOnly>
      {() => (
        <div>
          <p>
            当前链接:&nbsp;
            <code className="font-mono text-sm bg-bg-subtlest px-1 py-0.5">
              {window.location.href}
            </code>
          </p>
          <p>
            屏幕宽度:&nbsp;
            <code className="font-mono text-sm bg-bg-subtlest px-1 py-0.5">
              {window.innerWidth}px
            </code>
          </p>
        </div>
      )}
    </ClientOnly>
  );
}

属性

属性
fallback

组件在客户端挂载期间渲染的后备内容。

类型ReactNode默认值必须false

建议更改此页面