Подскажите как корректнее реализовать следующую идею:
У меня есть мои компоненты, написанные на React, отвечающие за получение от пользователя разнообразных данных (подготовленные списки и т.д.) типа
<MyElement_Users>
<MyElement_Countries>
и т.д.
Элементы естественно полностью самостоятельные, т.е. сбор данных, предварительная обработка и отрисовка происходит внутри компонента без взаимодействия с другими компонентами.
Из данных компонент можно собирать блоки типа за который отвечает отдельный компонент MyFilters
типа
<MyFilters title = "Информация #1">
<MyElement_Users>
<MyElement_Countries>
<MyElement_Products>
<MyElement_Apply>
</MyFilters>
или
<MyFilters title = "Информация #2">
<MyElement_Countries>
<MyElement_Apply>
</MyFilters>
Т.е. в данном построении знает о своих дочерних компонентах и строит их
<Container>
{props.children}
</Container>
А дочерние элементы не знают о своем родители и о своих соседях.
Я хочу сделать следующее:
Чтобы по нажатию кнопки <MyElement_Apply
> собирались данные от дочерних элементов <MyFilters>
для последующей работы с ними.
Вся логика работы с собранными данными также сидит в <MyFilters>
, поэтому:
- от элемента
MyElement_Apply
требуется, чтобы он как-то проинформировал элемент<MyFilters>
, что необходим сбор и анализ данных (по сути вызвать функциюMyFilters.my_analyze()
- от остальных дочерних элементов требуется как-то передать свои данные родителю
<MyFilters>
При этом очень не хочется при построении блоков передавать явно какие-то данные дочерним элементам, типа
<MyFilters title = "Информация #2">
<MyElement_Countries container = {this.container}>
<MyElement_Apply parent = {this}>
</MyFilters>
Хотелось бы обойтись минимализмом в этом вопросе (т.е. внутри логика может быть сложной, но снаружи такое простое использование, чтобы новые блоки можно было бы собирать обычной копи-пастой)
Подскажите как более корректно реализовать такой подход?
Если такое невозможно, то подумалось над следующим (хотелось бы реализовать через MobX) - стоит ли тогда подходить так:
<MyFilters>
создаёт/содержит внутри себя контейнер- контейнер (в виде ссылки или еще какого механизма) передаётся явно (к сожалению) всем дочерним компонентам
- компонент
<MyElement_Apply>
устанавливает в контейнере флагisApplied = true
- MobX отслеживает изменение данного поля и дёргает соответствующий метод
MyFilters.my_analyze()
Подскажите корректен ли такой подход и как его лучше реализовать?