React功能组件-是否可以将道具传递给{children}？[副本]

Question

我试图使用{children}将道具传递给子组件。

父亲组件：

const FatherComp = ({ children, propsToPassToChild }) => (
    <div>Dynamic component content: 
        {children}
    </div>
)

子组件：

const ChildComp = ({ childProps }) => <p>This is the dynamic content</p>

像这样使用它们：

<FatherComp>
    <ChildComp/> // childProps cannot be passed here since it's inside FatherComp
</FatherComp>

我想把来自FatherComp的道具直接传递给ChildComp：

const FatherComp = ({ children, propsToPassToChild }) => (
    <div>Dynamic component content: 
        >>>>> {children} <<<<< *passing the props somewhere here* 
    </div>
)

是否有可能实现我试图直接使用react功能组件而无需状态管理的目标？

谢谢

Answer 1

是的，您需要这样做：

<FatherComp>
    <ChildComp name="John" age="21"/>
</FatherComp>

const FatherComp = (props) => (
  <div>Dynamic component content: 
      {props.children}
  </div>
)

接受FatherComp中的道具，并使用{props.children}来呈现父亲组件中的所有子组件。

Answer 2

您应该使用渲染道具

裁判：https://reactjs.org/docs/render-props.html#gatsby-焦点包装器