Могу ли я получить доступ к дочерним функциям внутри от родителя через React.Children.toArray? - PullRequest
Новая
       21

Могу ли я получить доступ к дочерним функциям внутри от родителя через React.Children.toArray?

0 голосов
/ 29 апреля 2019

Могу ли я получить доступ к дочерним функциям внутри от родителя через React.Children.toArray?

Вот функция Parent, которая считает детей. В примере с реальным миром он должен был что-то сделать с детьми. 

function Parent({ children }) {
  // Flat children.
  function flatChildren(arr, initial) {
    return arr.reduce((accumulator, current) => {
      if (React.isValidElement(current) && current.props.children) {
        return flatChildren(React.Children.toArray(current.props.children), [
          ...accumulator,
          current
        ]);
      }
      return [...accumulator, current];
    }, initial || []);
  }

  const flat = flatChildren(React.Children.toArray(children));
  return <div>Length: {flat.length}</div>;
}

А вот функция Child: 

function Child() {
  return (
    <div>
      <span>test</span>
    </div>
  );
}

Теперь, если я рендерим Parent с помощью функции или с обычными React Elements, он не будет работать так же: 

<>

  <Parent>
    <div>
      <span>test</span>
    </div>
  </Parent>

  <Parent>
    <Child />
  </Parent>

</>

В первом отображается «Длина: 3», а во втором - «Длина: 1».

Я могу понять, почему: React не выполнил функцию: это черный ящик. Тем не менее, компонент отображается , поэтому должен быть способ отобразить фактические отрисованные дочерние элементы. Возможно ли это?

Примечание: на самом деле я звоню useEffet в моем Parent для разбора детей, так что, возможно, я смогу здесь что-то сделать.

...