javascript - 在 react-split-pane 中调整两个窗格的大小时遇到​​问题

Question

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

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

我在这里的沙盒中简化了该问题

我遇到的第二个问题是，当我使用这个新逻辑调整大小时，它看起来非常不稳定并且滞后很多。您无法在沙盒中判断，但在实际项目中，情况会变得非常糟糕。有没有更好的方法来解决这个问题，使调整大小更加流畅？如果是这样，我怎样才能做到这一点？

谢谢！

标签： javascripthtmlcssreactjsstyled-components

Answer 1

这是你想要达到的目标吗？沙盒

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

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

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