将组件渲染为道具的问题

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>
)

Issue with rendering a component as a prop