Проблема с рендерингом компонента в качестве опоры

Question

У меня есть компонент макета, который действует следующим образом:

const Layout = ({ children, sider }) => (
  <div>
    <div>{sider}</div>
    {children}
  </div>
)

Но я не могу реализовать его так, как ожидалось. Я надеюсь реализовать его следующим образом:

<Layout sider={Sider}>
  Body Content Here
</Layout>

Где Sider - другой компонент React.

Однако, когда я делаю это, мой Sider компонент не рендерит .

Я могу заставить его работать только так:

<Layout sider={<Sider />}>
  Body Content Here
</Layout>

Как мне обновить мой компонент Layout, чтобы я мог реализовать sider={Sider} вместо sider={<Sider />}?

Answer 1

Ваш второй подход верен, однако, если вы все еще хотите сделать это, сделайте так

const Layout = ({ children, sider: Sider }) => (
  <div>
    <div>
      <Sider />
    </div>
    {children}
  </div>
)

Answer 2

Другой способ справиться с этим - использовать React.createElement ()

Пример:

const Layout = ({ children, sider }) => (
  <div>
    <div>{React.createElement(sider)}</div>
    {children}
  </div>
)