Проблема с изменением размера обеих панелей в React-Split-Pane
У меня есть горизонтально разделенная панель для одного из моих проектов в React.js. Я использую React-Split-панель для обработки логики изменения размера. Каждая панель содержит таблицу с несколькими другими компонентами.
Проблема, с которой я столкнулся, заключается в том, чтобы нижняя панель настраивала свой размер в соответствии с оставшимся пространством в SplitPane. Например, если общая высота контейнера составляет 1000 пикселей, а размер верхней панели изменяется до 300 пикселей, мне нужно, чтобы размер нижней панели был 700 пикселей. Мне удалось изменить размер нижней панели до размера одно и тоже верхней панели. Как я могу заставить нижнюю панель изменить размер до размера оставшегося пространства всего контейнера?
У меня упрощенное воссоздание проблемы в песочнице здесь
Вторая проблема, с которой я столкнулся, заключается в том, что когда я изменяю размер с помощью этой новой логики, она выглядит очень нестабильной и немного тормозит. Вы не можете сказать в песочнице, но в реальном проекте все становится очень плохо. Есть ли лучший способ решить эту проблему, который сделает изменение размера более плавным? Если да, то как я могу этого добиться?
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 к вашим компонентам, чтобы помочь управлять, когда они действительно должны быть повторно отрисованы.
Именно то, что я искал! Спасибо за помощь. И да, волнение происходит из-за повторного рендеринга компонентов. Насколько я могу судить, обновляется просто встроенный стиль, но я рассмотрю
shouldComponentUpdate.