Допустим, у меня есть верхний Layout
компонент в моем JSX-дереве
<Layout>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/dashobard" component={Dashboard} />
<Route exact path="/persons" component={Persons} />
</Switch>
</Layout>
Предположим, что Layout
компонент имеет несколько заполнителей (слотов), в которых должно отображаться содержимое страницы c.
const Layout = () => {
return (
<div className="layout-container">
<div className="left-panel">
<MenuItem id={1} />
<MenuItem id={2} />
{pageSpecificMenuItems} // <-- here I want menu items provided by the current page
</div>
<div className="right-panel>
<div className="toolbar">
<ToolbarItem id={1} />
<ToolbarItem id={2} />
{pageSpecificToolbarItems} // <-- here I want toolbar items provided by the current page
</div>
<div className="page-title">{title}</div> // <-- here the title should be provided by the current page
<div className="content">
{content} // <-- here content should be provided by the current page
</div>
</div>
</div>
)
}
Теперь компонент страницы должен выглядеть так:
const Dashboard = () => {
const { t } = useTranslation();
return (
<AppPage
title={t('Dasboard.Title')} // <-- here the title text should be injected to the layout
menuItems={[<CustomMenuItem1 />, <CustomMenuItem2 />, ...]} // <-- here items could be generated dynamically and should be injected in the layout
toolbarItems={[<CustomToolbasItem1 />, <CustomToolbasItem2 />, ...]} // <-- here items could be generated dynamically and should be injected in the layout
>
<div>This is content</div> // <-- the children of AppPage element should be injected as the content to the layout component
<p>Still content</p> //
</AppPage>
);
}
Есть ли способ добиться этого с помощью произвольных вложенных компонентов страницы? (Имея непосредственно под Элемент Layout был бы простым, так как я мог бы получить реквизиты и дочерние элементы AppPage из метода рендеринга Layout. Но в моем примере непосредственным дочерним элементом Layout является элемент Switch, а Layout должен быть child-agnosti c.