react-table-library切换列数后渲染异常，CSS未更新如何修复？

问题概述 #

使用@table-library/react-table-library的CompactTable组件实现普通/扩展列模式切换时，切回普通模式后，表格的CSS变量--data-table-library_grid-template-columns仍保留扩展模式的设置，导致表格渲染异常：

• 普通模式预期CSS：

--data-table-library_grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);

• 扩展模式预期CSS：

--data-table-library_grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);

• 切回普通模式后实际CSS仍为扩展模式的设置，导致布局错乱。

解决方案 #

方案1：给表格组件添加唯一Key（推荐） #

React组件会根据key属性判断是否需要重新创建实例。当列模式切换时，通过修改key强制CompactTable重新渲染，让组件内部重新计算并更新CSS变量。

修改后的完整代码：

import './App.css';
import { useState } from 'react';
import { CompactTable } from '@table-library/react-table-library/compact';

const nodes = [
  {
    id: '0',
    name: 'Shopping List',
    deadline: new Date(2020, 1, 15),
    type: 'TASK',
    isComplete: true,
    nodes: 3,
  },
];

const NORMAL = [
  { label: 'Task', renderCell: (item) => item.name },
  {
    label: 'Deadline',
    renderCell: (item) =>
      item.deadline.toLocaleDateString('en-US', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      }),
  },
  { label: 'Type', renderCell: (item) => item.type },
];

const EXPANDED = [
  ...NORMAL,
  {
    label: 'Complete',
    renderCell: (item) => item.isComplete.toString(),
  },
  { label: 'Tasks', renderCell: (item) => item.nodes },
];

const App = () => {
  const [resize, setResize] = useState(false);
  const data = { nodes };

  return (
    <>
      <button onClick={() => setResize(!resize)}>Resize</button>
      <CompactTable 
        key={resize ? 'expanded-table' : 'normal-table'}
        columns={resize ? EXPANDED : NORMAL} 
        data={data} 
      />
    </>
  );
};

export default App;

方案2：手动重置CSS变量 #

通过ref获取表格元素，在切换模式时手动设置对应的CSS变量，强制更新布局：

import './App.css';
import { useState, useRef } from 'react';
import { CompactTable } from '@table-library/react-table-library/compact';

// 省略nodes、NORMAL、EXPANDED定义（同原代码）

const App = () => {
  const [resize, setResize] = useState(false);
  const tableRef = useRef(null);
  const data = { nodes };

  const handleResize = () => {
    setResize(prev => !prev);
    // 利用setTimeout确保组件状态更新后再修改CSS
    setTimeout(() => {
      if (!tableRef.current) return;
      
      const columnStyle = resize 
        ? 'minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr)'
        : 'minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr)';
      
      tableRef.current.style.setProperty(
        '--data-table-library_grid-template-columns',
        columnStyle
      );
    }, 0);
  };

  return (
    <>
      <button onClick={handleResize}>Resize</button>
      <CompactTable 
        ref={tableRef}
        columns={resize ? EXPANDED : NORMAL} 
        data={data} 
      />
    </>
  );
};

export default App;

方案3：升级组件版本 #

该问题可能是组件的已知bug，尝试升级@table-library/react-table-library到最新版本，确认官方是否已修复此问题。

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