如何通过功能组件将道具传递给孩子？

Question

我在将道具传递给功能反应中的孩子时遇到了麻烦。 我的{children}是一个Details组件，如下所示：

<SidebarPage>
   {children}
</SidebarPage>

const Details = () => {}

我怎样才能以这样的方式传递道具，我把道具放到{children}并在Details组件中收到这个道具？ 这甚至可行吗？

谢谢你的帮助！

Answer 1

您可以将组件作为道具传递，例如 -

const SidebarPage = ({ChildComponent}) => {
  const props = { name: "X" };

  return <ChildComponent {...props} />
}

const Details = (props) => {}

<SidebarPage ChildComponent={Details} />

Answer 2

您可以使用 cloneElement 向组件子组件添加新道具

const newProps = {aProp: "aProp"} ;

return (
<SidebarPage>
   {React.Children.map(props.children, child => {
     return React.cloneElement(child, {
       newProps,
    }, null)
   }
</SidebarPage>
)