Изменение размера обеих панелей в реакционно-разделенной панели

Question

У меня есть горизонтально разделенная панель для одного из моих проектов в React.js.Я использую response-split-pane для обработки логики изменения размера.Каждая панель содержит таблицу, обернутую в несколько других компонентов.

Проблема, с которой я столкнулся, заключается в том, чтобы заставить нижнюю панель настроить ее размер в соответствии с оставшимся пространством в SplitPane.Например, если общая высота контейнера составляет 1000 пикселей, а размер верхней панели изменяется до 300 пикселей, мне нужно, чтобы нижняя панель была 700 пикселей.Я смог изменить размер нижней панели до размера такого же верхней панели.Как я могу заставить нижнюю панель изменить размер до оставшегося пространства всего контейнера?

У меня есть упрощенное воссоздание проблемы в Песочнице здесь

ВторойУ меня проблема в том, что когда я изменяю размеры с этой новой логикой, она выглядит очень изменчивой и немного отстает.Вы не можете сказать в Песочнице, но в реальном проекте, это становится довольно плохо.Есть ли лучший способ решить эту проблему, который делает изменение размера более плавным?Если да, то как мне этого добиться?

Спасибо!

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 к вашим компонентам, чтобы помочь управлять моментом их рендеринга.