React中useEffect实现Table适配Div尺寸失效，求排查解决

你的代码存在几个关键问题导致高度适配不生效，逐一分析并修正：

1. Style属性键名错误 #

React的inline style对象中，高度的属性名是height，而非你代码里的heights。浏览器无法识别heights这个无效的CSS属性，所以设置的高度不会生效。

2. useEffect仅执行一次，无法响应变化 #

你的useEffect依赖为空数组[]，只会在组件挂载时执行一次。如果窗口大小改变、其他元素高度变化（比如筛选栏展开/收起），高度计算不会重新触发，容器高度无法更新。

3. DOM元素查询的潜在风险 #

直接重复调用document.querySelector不仅低效，还可能在组件挂载时因元素未渲染完成拿到null，导致计算报错。同时innerHeight - clientHeight的滚动条高度计算冗余，且无法动态响应滚动条的出现/消失。

修正后的代码示例 #

const [containerHeight, setContainerHeight] = useState(0);

useEffect(() => {
  const calculateContainerHeight = () => {
    // 获取所有需要计算的元素，做空值校验
    const header = document.querySelector('.header');
    const productsHead = document.querySelector('.products_head');
    const activeFilters = document.querySelector('.products_active-filters');
    const pagination = document.querySelector('.pagination');

    if (!header || !productsHead || !activeFilters || !pagination) return;

    // 计算其他区域总高度
    const totalOtherHeight = header.offsetHeight + productsHead.offsetHeight + activeFilters.offsetHeight + pagination.offsetHeight;
    // 计算容器可用高度，预留10px间距
    const availableHeight = window.innerHeight - totalOtherHeight - 10;
    setContainerHeight(availableHeight);
  };

  // 初始计算高度
  calculateContainerHeight();
  // 监听窗口尺寸变化，实时更新高度
  window.addEventListener('resize', calculateContainerHeight);

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    window.removeEventListener('resize', calculateContainerHeight);
  };
}, []);

return (
  <div className="my_list-body order_table" style={{ height: `${containerHeight}px` }}>
    {/* 你的Table内容 */}
  </div>
);

额外说明 #

• 把state命名为containerHeight，更直观且避免和style属性名混淆；
• inline style中给高度值加上px单位，确保浏览器正确解析；
• 封装计算逻辑为独立函数，方便复用和事件监听调用；
• 增加DOM元素空值判断，避免渲染阶段的报错；
• 添加窗口resize事件监听，适配窗口大小变化场景；
• 清理函数移除监听，防止内存泄漏。

内容的提问来源于stack exchange，提问作者DP Patel