React & MobX: доступ к дочерним компонентам из родителя для получения данных
Подскажите как корректнее реализовать следующую идею:
У меня есть мои компоненты, написанные на 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()
Подскажите корректен ли такой подход и как его лучше реализовать?
Ответы (1 шт):
С mobx я пока не пробовал.
Идея такая, что отделить разделяемый стейт от компонентов.
Если есть стейт, который меняет компонент Users и смотрит компонент Apply, то этот стейт объявляется явным образом рядом с ними, и передается им через пропы.
Внутри компонент может реагировать на переданный стейт: useEffect(()=>setOutput(calc(input)),[input])