如何防止扩展的 React-Table 行在重新渲染时折叠？

Posted 2023-02-19

【中文标题】如何防止扩展的 React-Table 行在重新渲染时折叠？

【英文标题】：How to prevent expanded React-Table row from collapsing on re-render?

【发布时间】：2020-05-30 09:02:25

【问题描述】：

我有一个简单的react-table，它带有一个扩展的子组件，其数据与 Redux 状态对象相关联。

当子组件被扩展时，我触发一个 api 调用来获取一些额外的数据以延迟加载到 redux 存储中。 redux 存储使用新数据进行更新，并且子组件 DOM 也成功更新，但 问题是重新渲染后展开的行不会保持展开状态。它崩溃了。

即使在 redux 存储更新并触发重新渲染后，有没有办法让我的扩展行保持扩展？

【问题讨论】：

折叠组件的状态是否也由 Redux 处理？比如：isChildExpanded: boolean

@r3dst0rm 不。redux 存储只有我的表和子组件的数据对象。但我想我知道你打算用这个去哪里☺

@LCIII - 提供一个问题的例子，可能只需要保持展开状态，但它可能更复杂，比如意外卸载。对于它的价值，我会将扩展状态放在 redux 中（个人意见），这听起来像是本地状态，除非您需要在挂载/卸载时保留它。

是的，我和@Adam 在一起。将展开的状态放入 Redux（我也将其放在此处），以将其包含在多个（重新）渲染中。 [如果你不喜欢 Redux 的想法，还有一些想法：也许也可以选择编写一个自定义钩子来实现同样的效果，但这听起来很讨厌。自定义上下文也可以用来解决这个问题。]

哎呀。我实际上是想说我会不将展开状态放入 redux，除非你需要。

【参考方案1】：

对我来说，将 collapseOnDataChange 设置为 false 有效

您也可以尝试 freezeWhenExpanded 属性并将其设置为 true。

【参考方案2】：

在配置中将 autoResetExpanded 设置为 false，更多详细信息 - https://react-table.tanstack.com/docs/api/useExpanded