0

Подскажите как корректнее реализовать следующую идею:

У меня есть мои компоненты, написанные на 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) - стоит ли тогда подходить так:

  1. <MyFilters> создаёт/содержит внутри себя контейнер
  2. контейнер (в виде ссылки или еще какого механизма) передаётся явно (к сожалению) всем дочерним компонентам
  3. компонент <MyElement_Apply> устанавливает в контейнере флаг isApplied = true
  4. MobX отслеживает изменение данного поля и дёргает соответствующий метод MyFilters.my_analyze()

Подскажите корректен ли такой подход и как его лучше реализовать?

1 ответ 1

0

С mobx я пока не пробовал.

Идея такая, что отделить разделяемый стейт от компонентов.

Если есть стейт, который меняет компонент Users и смотрит компонент Apply, то этот стейт объявляется явным образом рядом с ними, и передается им через пропы.

Внутри компонент может реагировать на переданный стейт: useEffect(()=>setOutput(calc(input)),[input])

3
  • т.е. всё таки потребутся явное задание? Вообще был в голове еще один вариант, но я не знаю реализуется ли он силами React - при создании (отрисовке) дочерних элементов им явно задается ссылка на контейнер, который они заполняют своими данными
    – Zhihar
    11 сен 2020 в 10:01
  • так я об этом и написал 11 сен 2020 в 11:59
  • явное не требуется, можно и через контекст делать; вопрос, что кода сэкономим вроде не много, а вспоминать потом, как работает, дольше 11 сен 2020 в 12:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.