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

Question

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

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

我在Sandbox here

中简化了问题

我遇到的第二个问题是，当我使用这个新逻辑调整大小时，它看起来非常不连贯并且相当滞后。你不能在Sandbox中讲述，但在实际项目中，它会变得非常糟糕。有没有更好的方法来解决这个问题，使调整大小更加流畅？如果是这样，我怎么能实现这个目标呢？

谢谢！

Answer 1

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

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

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

至于如何处理不稳定性，如果没有在应用程序的完整环境中看到它就很难说，但我猜想当你更新状态时它会重新渲染一堆引起滞后的组件我会考虑将shouldComponentUpdate添加到您的组件中，以帮助管理它们何时应该重新呈现。