Реагировать безопасный способ воспроизведения детей [дублировать] ⇐ Javascript

[Anonymous]

У меня есть несколько компонентов баннера, которые каждый рендеринг < /code> на основе данных API.

Каждый баннер обрабатывает свою собственную логику видимости - если ответ API является false, он возвращает null < /code>; Если True, это отображает баннер. < /p>
Пример одного баннера: < /p>

Код: Выделить всё

import { Alert } from "@/ui";
import { useHook } from "@/utils";

export const OneChild = () => {
const { data, isLoading } = useHook();
if (isLoading || !data?.balances?.hasOneChild) return null;

return (

);
};
< /code>
На приборной панели я хочу отобразить только первый баннер, который не является нулевым (в порядке приоритета).
Я создал обертку под названием renderchildren < /code>, которая завершает все баннеры: < /p>






< /code>
А вот моя первая попытка: < /p>
export const RenderChildren = ({ children }: { children: React.ReactNode }) => {
const childrenArray = React.Children.toArray(children);

const validChildren = childrenArray.filter((child) => {
if (!React.isValidElement(child)) return false;
if (typeof child.type === 'function') {
try {
const rendered = (child.type as (props: unknown) => React.ReactNode)(child.props);
return rendered !== null && rendered !== undefined;
} catch {
return false;
}
}
return true;
});

const firstChild = validChildren[0];
return firstChild || null;
};
< /code>
Это работает, но он вызывает каждую функцию компонента вручную (child.type(child.props)

), который нарушает правила крючков React и не является безопасным.
Что я попробовал/что я знаю:
Я понимаю, что вручную вызов компонента разрыва. Возврат. призывая детей), которые достигают этого?

Подробнее здесь: https://stackoverflow.com/questions/797 ... r-children