Я переношу свой сайт из стека LAMP в стек MERN. На старом сайте у меня был выпадающий список, где кнопка переключала бы отображение div
одного из родных братьев и сестер. Структура выглядела так:
<div class="header">
<div class="header-option">Option 1</div>
<div class="header-option" id="toggle-dropdown">Option 2</div>
<div class="header-option">Option 3</div>
</div>
<div id="dropdown-content">
Lorem ipsum
</div>
Я бы использовал JQuery для определения щелчка по #toggle-dropdown
и затем переключал бы отображение #dropdown-content
. Я превратил это в плагин многократного использования, который можно использовать по всему сайту. Теперь я хотел бы сделать что-то подобное в React с повторно используемым компонентом. Но я не могу найти лучшую практику для доступа и изменения реквизита не непосредственных детей. Я бы, конечно, обернул все это в <Dropdown>
компонент, чтобы обработать состояние и иметь возможность абстрагировать процесс.
То, о чем я думал и нашел до сих пор:
- Повторяется через детей, их детей и т. Д., Ищет displayName и затем клонирует ребенка; но я не верю, что это работает в производстве.
- Перенос JSX в качестве реквизита верхнего и нижнего колонтитула в
Dropdown
, а затем попытка сгенерировать DropdownButton
и DropdownContent
в компонентах с соответствующими реквизитами; Я чувствую, что это было бы очень неэффективным, нежелательным решением для чего-то, что, по моему мнению, должно быть относительно простым.