Как предоставить контент для реагирования компонента из дочернего компонента (слотов)? - PullRequest
0 голосов
/ 08 мая 2020

Допустим, у меня есть верхний 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...