无法在 react-split-pane 中调整两个窗格的大小

Question

我在 React.js 中的一个项目有一个水平拆分窗格。我正在使用 react-split-pane 来处理调整大小逻辑。每个窗格都包含一个 table 包裹在一些其他组件中。

我遇到的问题是让底部窗格将其大小调整为 SplitPane 中剩余的 space。例如，如果容器的总高度为 1000 像素，顶部窗格的大小调整为 300 像素，我需要底部窗格为 700 像素。我能够将底部窗格的大小调整为与顶部窗格相同 的大小。如何让底部窗格调整到整个容器的剩余 space？

我在沙盒中对问题进行了简化重现 here

我遇到的第二个问题是，当我使用这个新逻辑调整大小时，它看起来非常不稳定并且滞后了很多。在 Sandbox 中你看不出来，但在实际项目中，它变得很糟糕。有没有更好的方法来解决这个问题，使调整大小更流畅？如果是这样，我该如何实现？

谢谢！

Answer 1

这是您想要达到的目标吗？ Sandbox

我刚刚在您的 toggleBtmHeight 函数中添加了一些逻辑，以找出调整大小后底部窗格的高度应该是多少。当您调整窗格大小时，onChange 回调会传递给您 primary（顶部）窗格的高度。您需要使用 maxHeight - topPaneHeight = bottomPaneHeight 来确定底部窗格的高度应该是多少：

toggleBtmHeight(topPaneHeight) {
  const maxHeight = 1000;
  const padding = 225;
  const btmPaneHeight = maxHeight - topPaneHeight - padding;
  this.setState({ btmHeight: btmPaneHeight + "px" });
}

至于如何处理断断续续，如果不在您的应用程序的完整上下文中看到它就很难说，但我猜想当您更新状态时它会重新渲染一堆组件导致延迟。我会考虑将 shouldComponentUpdate 添加到您的组件中，以帮助管理何时应该实际重新渲染它们。