Как отображать только детей, у которых есть определенная опора в реакции с HOC

Question

Я создаю HOC, который будет проверять своих детей (и их) на определенной опоре, onEditable в этом случае.Если ничего не указано, предполагается, что дочерний элемент хочет быть показан, если он установлен на hide, он не будет отображать дочерний элемент.

(реквизит не является логическим, потому что позже я добавлю больше опций)

const MyComponent = ({ children, }) => {
  const getChildren = (myChildren, onEditable = 'show') => React.Children.map(myChildren, (child) => {
    let myOnEditable = onEditable;
    const { props, } = child;
    if (props) {
      const { onEditable: onEdit, children: grandChildren, } = props;
      onEdit && (myOnEditable = onEdit);
      typeof grandChildren === 'object'
          && getChildren(grandChildren, myOnEditable);
    }
    console.log(myOnEditable);
    if (myOnEditable === 'show') {
      return child;
    }
  });
  return <div>{getChildren(children)}</div>;
};

ReactDOM.render(
    <MyComponent>
      <p onEditable="show">show</p>
      Unspecified
      <div onEditable="hide">
        <span onEditable="show">show inside hide</span>
        <p>Unspecified in hide</p>
      </div>
      <div onEditable="show">
        <span onEditable="hide">hide inside show</span>
        <p>Unspecified in show</p>
      </div>
    </MyComponent>,
    document.getElementById('root')
  );

<div id='root'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Назначение правильного значения onEditable каскадным способом работает, как видно на консоли, но только рендеринг значений show не работает.Какой вид имеет смысл при следовании вместе с кодом.Проблема есть;Я понятия не имею, как это решить.

Самым сложным для меня обернуть голову является возможность отрисовки родительского компонента, для которого onEditable установлено на hide, когда один из его дочерних элементов имеет значение show.

Это может показаться странным, поэтому я объясню еще кое-что.Родительский компонент с onEditable, установленным на hide, каскадно передает это свойство своим дочерним элементам (так, как я хочу, чтобы мой HOC), но если в дальнейшем у ребенка или внука будет установлен этот реквизит для показа, все его родители должны отрендеритьтакже, но не его братьев и сестер (поскольку у них все еще есть свойство hide от их родителей, если не указано иное)

Поэтому я ожидаю следующую структуру DOM в моем примере:

<p onEditable="show">show</p>
Unspecified
<div onEditable="hide">
  <span onEditable="show">show inside hide</span>
</div>
<div onEditable="show">
  <p>Unspecified in show</p>
</div>

Answer 1

"если он скрыт, он не отобразит дочерний элемент."

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

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

Это называется «снятием состояния», которое соответствует быстродействующему отказу и шаблону / рекомендациям по проектированию с ранним возвратом и детерминированному одностороннему потоку данных, на который опирается React (и пытается применить его).

---

Ну, React работает сверху вниз, и родители фактически указывают реквизиты для детей. Я на 99% уверен, что у вас все задом наперед, и что вы должны говорить детям isVisible={true} или isVisible={false} в зависимости от this.props.isEditable. (или добавить classNames / не отображать их).

Единственный способ, которым дети могут настроить родителей, - это обратные вызовы или глобальный менеджер состояний, такой как redux, который вводит реквизиты обратно в родителя.

Если ваш ребенок волшебным образом получает информацию о том, должен ли он отображаться, ему следует позвонить по номеру this.props.onMagicallyGotSomeInformation. В противном случае состояние должно существовать у ближайшего родителя, который знает эту информацию, и оно должно передаваться / потребляться при необходимости.

Другая критика заключается в том, что операторы короткого замыкания и используемый вами синтаксис причинят вам гораздо больше боли, чем стоит. Используйте const, если операторы и фигурные скобки :) это сделает вашу жизнь проще в долгосрочной перспективе.

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