将组件渲染为道具的问题答案

【问题标题】：Issue with rendering a component as a prop将组件渲染为道具的问题
【发布时间】：2020-07-27 02:32:35
【问题描述】：

我有一个布局组件，其作用如下：

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 />}？

【问题讨论】：

【解决方案1】：

另一种处理方法是使用React.createElement()

例子：

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

【讨论】：

【解决方案2】：

您的第二种方法是正确的，但是如果您仍然想这样做，请这样做

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

【讨论】：

我知道这是一个适得其反的问题，但在奇怪的情况下，我想在其中添加一个带有道具的组件，是否可以做类似sider={() => <Component name="hello" />} 的事情？
sider={() => <Component name="hello" />} 与您的原始问题相同。