react-virtualized Table窗口调整大小时行宽未实时更新问题咨询

这个问题是表格组件内部对可见行的渲染做了性能优化，默认只有滚动、数据源变更等场景才会触发行宽重计算，窗口resize时传入的新width只会触发表头重绘，不会主动更新已渲染的行的尺寸。

方案1：添加强制重绘属性（适配Blueprint UI的Table2组件，优先选用） #

Blueprint 的 Table2 组件原生提供了forceRerenderOnResize属性，开启后会在容器尺寸变化时自动重新渲染所有可见单元格，同步行宽和表头尺寸，直接在Table2标签上添加即可，修改后的核心代码如下：

<AutoSizer>
    {({ height, width }) => (
 <Table2
 height={height}
 width={width}
 forceRerenderOnResize={true} // 新增这一行即可
 headerHeight={80}
 rowHeight={100}
 rowCount={list.length}
 rowStyle={{ borderRadius: 20, backgroundColor: "#555", borderBottomStyle: "solid"}}
 headerStyle={{backgroundColor: "grey", border: "solid", borderColor: "grey", borderRadius: 10}}
 rowGetter={({index}) => list[index]}>
{(() => {const vysledok = tableHeaderConfig.map((tableHeaderConfig, columnIndex) => {
  return <Column  width={(() => columnIndex < 5 ? 300 : 1000)()} 
                style={{
                  whiteSpace:"normal", 
                  display: "flex", 
                  justifyContent: "center", 
                  border: "solid", 
                  borderColor: "transparent", 
                  color: "white", 
                  textShadow: "2px 2px 8px black"}} 
                headerRenderer={() => sortHeader(tableHeaderConfig)}  
                cellRenderer={({rowData, rowIndex})=>
                    getObjectTable(rowData, rowIndex, {name:tableHeaderConfig["name"], sortType:tableHeaderConfig["sortType"]})}/>                  
}); return vysledok})()}
</Table2>
)}
</AutoSizer>

方案2：绑定key触发组件重建（通用所有表格组件） #

如果是其他实现的Table2组件，可以给Table2组件的key属性绑定AutoSizer返回的width值，只要窗口宽度变化、width更新，就会触发表格组件的完整重建，自动使用最新尺寸计算所有行的宽度，只需新增key={width}属性即可。

这个方案不需要依赖组件的原生API，适配所有Table组件实现，只有极窄场景下（窗口高频拖动resize）会有可忽略的性能损耗。

方案3：通过实例方法主动触发重计算（适配react-virtualized Table） #

如果你使用的是react-virtualized的Table组件，可以通过ref调用内置的重计算方法主动刷新：

1. 先声明表格ref：

const tableRef = useRef(null);

2. 给Table绑定ref，同时添加useEffect监听width变化触发重计算：

useEffect(() => {
  tableRef.current?.recomputeGridSize()
}, [width])

注意：你当前代码中的Column宽度是固定值（前5列300px，其余1000px），如果需要列宽跟随窗口宽度自适应，可以把width的取值改为根据AutoSizer返回的width动态计算，例如width={width / tableHeaderConfig.length}

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