import { CSSProperties, ReactNode, useState } from 'react';
type LayoutWithSidebarProps = {
className?: string;
sidebar: ReactNode;
content: ReactNode;
maxWidth?: string;
isPageLayout?: boolean;
};
export function LayoutWithSidebar({
className = '',
sidebar,
content,
maxWidth,
isPageLayout = false,
}: LayoutWithSidebarProps) {
const [isSidebarExpanded, setSidebarExpanded] = useState(false);
const toggleSidebar = () => {
setSidebarExpanded(!isSidebarExpanded);
};
return (
className={`quark-layout-with-sidebar ${isPageLayout ? 'quark-layout-with-sidebar--page-layout' : ''} ${className}`}
style={style}
>
{'>>'}
{isSidebarExpanded && (
className={`quark-layout-with-sidebar__overlay ${isSidebarExpanded ? 'quark-layout-with-sidebar__overlay--active' : ''}`}
onClick={toggleSidebar}
/>
)}
{sidebar}
{content}
);
}
< /code>
У меня есть компонент обертки макета, который принимает два реагирования в качестве реквизита -> боковая панель и содержание. Результатом является стилизованный макет страницы, поэтому мне не нужно делать это снова и снова во всех моих приложениях < /p>
, но я не уверен, является ли это хорошим шаблоном для передачи этих компонентов (боковой панели и контента) в качестве реквизита. Мой самый большой вопрос: если, например, я передаю компонент для опоры контента, и компонент будет повторно рендеринг, это приведет ли это повторный родитель?>
Подробнее здесь: https://stackoverflow.com/questions/795 ... whole-para
