React 功能组件 - 是否可以将道具传递给 { children }？ [复制]答案

【问题标题】：React functional component - is it possible to pass props to { children }? [duplicate]React 功能组件 - 是否可以将道具传递给 { children }？ [复制]
【发布时间】：2023-03-24 17:30:02
【问题描述】：

我正在尝试使用 {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 的道具 (propsToPassToChild) 直接传递给 ChildComp：

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

是否有可能通过直接反应功能组件而无需状态管理来实现我想要做的事情？

谢谢！

【问题讨论】：

标签： javascript reactjs next.js react-props react-functional-component

【解决方案1】：

是的，你需要这样做：

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

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

接受 FatherComp 中的 props 并使用 {props.children} 渲染父组件内的所有子组件。

【讨论】：

我正在尝试向 props.children 传递 Child 组件接受的另一个道具
您能否向我们展示您拥有的完整代码，以便我们中的任何人更好地理解它？

【解决方案2】：

你应该使用render props

参考：https://reactjs.org/docs/render-props.html#gatsby-focus-wrapper

【讨论】：