我在 React.js 中的一个项目有一个水平拆分窗格。我正在使用react-split-pane 来处理调整大小的逻辑。每个窗格都包含一个包含在其他一些组件中的表格。
我遇到的问题是让底部窗格将其大小调整为 SplitPane 中的剩余空间。例如，如果容器的总高度为 1000 像素，顶部窗格的大小调整为 300 像素，我需要底部窗格为 700 像素。我能够将底部窗格的大小调整为与顶部窗格的 相同 大小。如何让底部窗格调整到整个容器的剩余空间？
我在沙盒 here 中简化了该问题的重现
我遇到的第二个问题是，当我使用这个新逻辑调整大小时，它看起来非常不稳定并且滞后很多。您无法在沙盒中判断，但在实际项目中，情况会变得非常糟糕。有没有更好的方法来解决这个问题，使调整大小更加流畅？如果是这样，我该如何实现？
谢谢！
【问题讨论】：
标签： javascript html css reactjs styled-components
这是您想要达到的目标吗？ 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 添加到您的组件中，以帮助管理何时应该重新渲染它们。
【讨论】：
shouldComponentUpdate。