时间戳

首页 > 解决方案 > 使用 children 方法将父属性传递给子组件

reactjs - 使用 children 方法将父属性传递给子组件

问题描述

我有这样的情况：

我用内容调用父模态组件：

<Modal onClickOnYesButton ={() => console.log('test')}>
   <ModalContent />
</Modal>

模态组件本身看起来像这样：

const Modal = ({ children }) => {
  return(
   <div>
    {children}
   </div>
  )
}

因此，模态内容组件使用children. 问题是我如何在不直接将其作为 ModalContent 属性放置的情况下传递onClickOnYesButton给它？<ModalContent />

标签： reactjs

解决方案

我如何将 onClickOnYesButton 传递给而不将其直接作为 ModalContent 属性

如果您想将道具传递给孩子，您可以React.cloneElement(children, { ...props })在Modal.

即是这样的：

const Modal = ({ children, ...props }) => {
  return(
   <div>
    { React.cloneElement(children, { ...props }) }
   </div>
  )
}

React.cloneElement尽管请注意，这仅适用于单个孩子，但如果您有更多，则需要将React.Children.map.

推荐阅读