Реакция - Родительский макет зависит от содержания детей

Question

У меня есть ситуация, когда класс родителей зависит от того, есть ли у детей содержание.

 <div className="parent">
    <div className="child1"></div>
    <div className="child2"></div>
    <div className="child3"></div>
 </div>

Например, если child1 - единственный дочерний элемент, имеющий содержимое, родительский класс должен быть "a", если child1 и child2 имеют содержимое, родительский класс должен быть "ab" и т. Д. Каждый дочерний элемент поддерживает свое собственное состояние, то есть дочерний элемент может начинаться с содержание и изменения состояния не имеют ни одного в конце. Я смотрю на использование компонентов и ссылок высшего порядка для решения этой проблемы, но пока не нашел хорошего решения. Хотите знать, если есть шаблон сборки, чтобы помочь с этой проблемой.

Answer 1

Мое понимание традиционного React предполагает, что если родительский компонент зависит от состояния дочерних компонентов, то эта переменная состояния должна действительно поддерживаться общим прародителем следующим образом:

<Grandparent> //Maintains State
    <Parent> // receives Grandparent state and state manipulation functions as props
        <Child 1> // receives Grandparent state and state manipulation functions as props (via Parent)
        <Child ...n> // same as child one.

Вы будете в конечном итоге передавать функции, определенные как методы, до тех пор, пока инициированные изменения не могут повлиять на переменную состояния, а реквизиты будут переданы новым.

Передача функций и состояний вниз и вверх по дереву может стать грязной, поэтому в зависимости от того, сколько уровней у вас есть в вашем дереве, и сколько состояний вы проходите, вы можете взглянуть на избыточность, чтобы упростить поток. Redux действует как контейнер состояний вне иерархии React, делая универсальные переменные состояния легкодоступными на любом уровне дерева.