将组件渲染为道具的问题

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