Я использую React 15, и у меня есть один компонент с несколькими элементами управления. Они отображаются с использованием flexbox:
Некоторые из них, когда активны, могут показывать / скрывать опции (нажмите на стрелку вправо), см. Следующую картинку:
- Однако управление переключением Verbal Tense идет «до дна». Мне бы хотелось, чтобы оба переключателя оставались фиксированными и отображали только один или другие параметры, связанные с элементами управления, когда нажата стрелка вправо:
Должен ли я контролировать ширину (адаптивный дизайн), чтобы знать, когда flexbox ломает линию, и рисовать таким образом поле опций вместо рендеринга сразу после соответствующего переключения? Есть ли обходной путь? Потому что, если это так, я не вижу смысла использовать flexbox.
Еще один вопрос:
Поскольку код компонента стал длинным, я решил написать компонент для каждого элемента управления. Элементы управления будут отображаться так:
<div>
<ToggleControl>
{ this.state.showOptions && <Options />}
</div>
Однако в этом случае рендеринг еще хуже, так как ни ToggleControl, ни Options не являются дочерними элементами flexbox, поэтому в состоянии, подобном последнему изображению, также переключатель Verbal Tense переместился бы на следующую строку (Option имеет значение 100% ширины ), когда отображаются соответствующие параметры. Я думаю, я мог бы исправить это с помощью фрагментов React, но я использую React 15 и сейчас это не вариант: - (.
Решение первого вопроса, но с компонентами, я полагаю, нужно будет отображать параметры каждого компонента вне компонента. Я думаю, это то, что делают Portals, но я снова использую React 15 ...
Любая идея или обходной путь?