169 похожих чатов

Подскажите как посчитать реальное кол-во 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)}
но это не дело

Спасибо

17 ответов

13 просмотров
Znacovean-Simion ... Автор вопроса

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

Znacovean Simion ...
есть у кого идеи?

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

Znacovean-Simion ... Автор вопроса

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

Znacovean-Simion ... Автор вопроса
Илюша 🎂
можно песочницу?

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

Znacovean-Simion ... Автор вопроса
R ZHUKOV ZHUKOV
прокинь во врапер реф и считай чилдренов

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

Znacovean Simion ...
есть компонент который должен уметь показывать кно...

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

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

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

Znacovean-Simion ... Автор вопроса
Стас
А если делать проверку, если фрагмент, то брать ег...

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

Znacovean-Simion ... Автор вопроса
R ZHUKOV ZHUKOV
что именно не понятно? как реф прокинуть?

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

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

Znacovean-Simion ... Автор вопроса
R ZHUKOV ZHUKOV
ну ты попробуй, а потом утверждай

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

Znacovean Simion ...
ты убеждаешь меня что через реф children мне посчи...

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

Znacovean-Simion ... Автор вопроса
R ZHUKOV ZHUKOV
https://codesandbox.io/s/react-typescript-forked-q...

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

Znacovean Simion ...
есть компонент который должен уметь показывать кно...

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

Похожие вопросы

Обсуждают сегодня

Всем привет, написал код ниже, но он выдает сегфолт, в чем причина? #include <stdio.h> #include <stdlib.h> #include <string.h> struct product { char *name; float price; };...
buzz базз
70
Всем доброго дня, ребят подскажите пожалуйста, если в курсе по ассемблеру используется MASM32, могу ли я использовать FASM? В чем явная разница и будет ли у меня все работать?
Botsman
17
Хотел бы спросить у знающих, правильную ли я выбрал книгу для начала изучения ассемблера Юрова В.И ? Или есть более лучшие книги для начала обучения?
Botsman
25
Книга Юрова В.И пойдёт для обучения?
Botsman
24
$params = [ 'formid' => 'feedbackForm', 'formTpl' => '@CODE: <form class="form-validate" data-id="ajax_form"> <fieldset class="margin-bottom-md"> ...
Pathologic
1
Люди добрые, помогите с идеями, потому что свои закончились. У клиента падает софтина в момент инициализации модуля OtlEventMonitor на RegisterWindowMessage('Gp/OtlTaskEvents/...
Михаил Усков
7
> Примечательно, что новый владелец удаляет из GitHub любые жалобы, указывающие на подозрительную активность или смену владельца, и, видимо, рассчитывает на то, что пользовате...
Alex Sherbakov
2
GridView fully ignored first parent(SizedBox), and take width from second parent(Container). How can I constrain GridView by first parent? Widget build(BuildContext context) {...
Hamster
1
Коллеги, добрый день. Есть такой вопрос: Есть модуль, который надо запустить через супервизор как дочерний процесс. Пока инстансов было нужно 8, всё было окей, но когда их ст...
Δημήτηρ
4
Hey there Which is the best Linux destro for developers (coding)? To my research on reddit, they said Linux mint is good for mid level spec and Ubuntu for high Lev hardwar...
Wiz 🪄
11
Карта сайта