Подскажите как посчитать реальное кол-во children–ов при условии что если

среди children-ов есть
- фрагмент
- компонент который возвращает фрагмент

то нужно учесть кол-во его children-ов (интересует 1 уровень вложенности)


import type { ReactNode } from 'react';
import { Children, isValidElement, cloneElement } from 'react';
import { isFragment } from 'react-is';

/* Returns React children into an array, flattening fragments. */
export function flattenChildren(
children: ReactNode,
depth = 0,
keys: (string | number)[] = [],
): ReactNode[] {
return Children.toArray(children).reduce((acc: ReactNode[], node, nodeIndex) => {
if (isFragment(node)) {
acc.push.apply(
acc,
flattenChildren(node.props.children, depth + 1, keys.concat(node.key || nodeIndex)),
);
} else if (isValidElement(node)) {
acc.push(
cloneElement(node, {
key: keys.concat(String(node.key)).join('.'),
}),
);
} else if (typeof node === 'string' || typeof node === 'number') {
acc.push(node);
}
return acc;
}, [] as any);
}


Этот код учитывает фрагменты в качестве children-ов но если передан компонент который возвращает фргамент то не посчитает.
Подскажите какие варианты у меня есть?
Посчитает если компонент вызвать {SomComponent(props)}
но это не дело

Спасибо

есть у кого идеи?

какую проблему решаешь?

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

можно песочницу?

https://codesandbox.io/embed/frosty-chaum-my41yk?file=/src/App.tsx&codemirror=1 вместо <Items/> если вызвать {Items({})} только так будет считать

прокинь во врапер реф и считай чилдренов

не совсем понимаю идею можно пример кода?

А если делать проверку, если фрагмент, то брать его чилдрены

что именно не понятно? как реф прокинуть?

так проверка на фрагмент не сработает так как передан компонент который возвращает фрагмент с фрагментами то проблем нету

непонятно кому его прокидывать враппер это самодостаточный компонент для многоразового юза на одной странице с разными чилдренами

родителю, в котором дети конечно же

ну ты попробуй, а потом утверждай

ты убеждаешь меня что через реф children мне посчитает другое кол-во? нет же если компонент 1 передан в качестве чилдрена он и вернёт 1 а мне надо в случае если этот компонент возвращает фрагмент, то зафлетить его

https://codesandbox.io/s/react-typescript-forked-qu3g0m?file=/src/App.tsx ну или может я не правильно понял условие задачи

я так понимаю эту задачу решить можно только если компонент будет клиентским? потому что в useEffect ты чекаешь реальное кол-во чилдренов?

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