React SSR中className不匹配警告：解决浏览器API依赖问题

import React, { useState, useEffect } from 'react';

const Sidebar = ({ item }) => {
  // 尝试在组件初始化时读取localStorage
  const checkExpanded = () => {
    // 这里的 typeof window !== "undefined" 检查在服务器端会返回 false
    if (typeof window !== "undefined") {
      const sidebarState = localStorage.getItem("sidebarState");
      if (sidebarState) {
        return JSON.parse(sidebarState);
      }
      return true; // 客户端默认值
    }
    return false; // 服务器端默认值，因为无法访问 localStorage
  };

  // useState 的初始值在服务器和客户端可能不同
  const [expanded, setExpanded] = useState(checkExpanded());

  // ... 其他逻辑，例如 useEffect 来更新状态

  return (
    <span className={expanded ? "inline" : "hidden"}>
      {item.text}
    </span>
  );
};

export default Sidebar;

import dynamic from 'next/dynamic';
import React, { useState, useEffect } from 'react';

// 将原来依赖 localStorage 的组件逻辑封装在一个独立的组件中
const ClientSideSidebarContent = ({ item }) => {
  const checkExpanded = () => {
    // 这里的代码只会在客户端执行
    const sidebarState = localStorage.getItem("sidebarState");
    if (sidebarState) {
      return JSON.parse(sidebarState);
    }
    return true;
  };

  const [expanded, setExpanded] = useState(checkExpanded());

  const toggleExpanded = () => {
    setExpanded(!expanded);
  };

  // 确保在客户端挂载后才更新状态
  useEffect(() => {
    const sidebarState = localStorage.getItem("sidebarState");
    if (sidebarState) {
      setExpanded(JSON.parse(sidebarState));
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("sidebarState", JSON.stringify(expanded));
  }, [expanded]);

  return (
    <span className={expanded ? "inline" : "hidden"}>
      {item.text}
    </span>
  );
};

// 使用 dynamic 导入 ClientSideSidebarContent 并禁用 SSR
const DynamicSidebar = dynamic(() => Promise.resolve(ClientSideSidebarContent), {
  ssr: false,
  // 可选：添加 loading 状态，在组件加载前显示
  loading: () => <span className="loading-placeholder">加载中...</span>,
});

// 在父组件中使用 DynamicSidebar
const ParentComponent = () => {
  const item = { text: "侧边栏项目" }; // 示例数据
  return (
    <div>
      {/* 其他服务器渲染内容 */}
      <DynamicSidebar item={item} />
    </div>
  );
};

export default ParentComponent;