如何在Admin组件状态变更时重新渲染资源？屏幕尺寸触发失效

首先咱们拆解下问题：你通过Render Prop方式在Admin组件里动态加载资源，想在屏幕尺寸变化时重新执行loadingResources函数，但状态变更后资源没更新。核心问题在于**loadingResources没有响应screenSize的变化，或者Admin组件没感知到screenSize的变更去触发资源重载**。

步骤1：正确维护screenSize状态并传递给Admin #

先确保screenSize状态在Admin的父组件（或所在组件）中管理，通过resize事件实时更新：

import { useState, useEffect } from 'react';
import { Admin } from 'react-admin';

const App = () => {
  // 初始化时获取当前屏幕尺寸
  const [screenSize, setScreenSize] = useState(() => 
    window.innerWidth < 768 ? 'small' : 'medium'
  );

  useEffect(() => {
    const handleResize = () => {
      const newSize = window.innerWidth < 768 ? 'small' : 'medium';
      setScreenSize(newSize);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <Admin 
      customReducers={customReducers} 
      dashboard={Dashboard} 
      restClient={restClient} 
      loginPage={CustomLoginPage} 
      authClient={authClient} 
      menu={CustomMenu}
      // 传递动态的screenSize给Admin
      screenSize={screenSize}
    >
      {/* 把screenSize作为参数传入loadingResources，让函数感知尺寸变化 */}
      {({ modules }) => loadingResources(modules, screenSize)}
    </Admin>
  );
};

步骤2：让loadingResources依赖screenSize #

修改loadingResources函数，让它接收screenSize作为参数，根据屏幕尺寸动态调整返回的资源数组。这样当screenSize变化时，函数会重新执行，返回新的资源配置：

const loadingResources = (modules, screenSize) => {
  // 根据屏幕尺寸过滤/调整资源
  const adaptedModules = modules.filter(module => {
    // 示例：小屏幕隐藏特定资源
    if (screenSize === 'small' && module.name === 'large-dashboard-only') {
      return false;
    }
    return true;
  });

  // 转换为React Admin的Resource组件数组
  return adaptedModules.map(module => (
    <Resource 
      key={module.id} 
      name={module.name} 
      list={module.listComponent}
      // 其他资源配置...
    />
  ));
};

步骤3：优化resize事件性能（可选） #

频繁的resize事件会导致状态频繁更新，建议添加防抖处理：

useEffect(() => {
  let timeoutId;
  const handleResize = () => {
    clearTimeout(timeoutId);
    // 200ms防抖，避免频繁触发状态更新
    timeoutId = setTimeout(() => {
      const newSize = window.innerWidth < 768 ? 'small' : 'medium';
      setScreenSize(newSize);
    }, 200);
  };

  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
    clearTimeout(timeoutId);
  };
}, []);

这样调整后，屏幕尺寸变化时screenSize状态更新，传递给Admin组件后，Render Prop函数会因依赖变化重新执行loadingResources，返回新的Resource数组，Admin就会自动重新渲染资源了。

内容的提问来源于stack exchange，提问作者Alexander Knyazev