我的一个 React.js 元素有一个水平拆分 Pane 。我正在使用 react-split-pane处理调整大小逻辑。每个 Pane 都包含一个包含在其他几个组件中的表格。
我遇到的问题是让底部 Pane 将其大小调整为 SplitPane 中的剩余空间。例如，如果容器的总高度为 1000 像素，顶部 Pane 的大小调整为 300 像素，我需要底部 Pane 为 700 像素。我能够将底部 Pane 的大小调整为与顶部 Pane 相同的大小。如何让底部 Pane 调整大小以适应整个容器的剩余空间？
我在 Sandbox 中对问题进行了简化重现 here
我遇到的第二个问题是，当我使用这个新逻辑调整大小时，它看起来非常不稳定并且滞后了很多。在 Sandbox 中你看不出来，但在实际元素中，它变得很糟糕。有没有更好的方法来解决这个问题，使调整大小更流畅？如果是这样，我该如何实现？
谢谢!
最佳答案
这就是您要达到的目标吗？ Sandbox
我刚刚在您的 toggleBtmHeight 函数中添加了一些逻辑，以找出调整大小后底部 Pane 的高度应该是多少。当您调整 Pane 大小时，onChange 回调会传递给您 primary(顶部) Pane 的高度。您需要使用 maxHeight - topPaneHeight = bottomPaneHeight 来确定底部 Pane 的高度应该是多少:
toggleBtmHeight(topPaneHeight) {
const maxHeight = 1000;
const padding = 225;
const btmPaneHeight = maxHeight - topPaneHeight - padding;
this.setState({ btmHeight: btmPaneHeight + "px" });
}
至于如何处理断断续续，如果不在您的应用程序的完整上下文中看到它就很难说，但我猜想当您更新状态时它会重新渲染一堆组件导致延迟。我会考虑将 shouldComponentUpdate 添加到您的组件中，以帮助管理何时应该实际重新呈现它们。
关于javascript - 无法在 react-split-pane 中调整两个 Pane 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50592209/