求助：自定义Modal组件无法渲染传入的子组件

核心原因 #

你的自定义Modal组件未在props参数中接收children，导致模板里的{children}始终为undefined，无法渲染传入的子内容。

修复步骤 #

修改Modal组件的定义，确保解构props时包含children：

// 补充children参数到组件props中
const Modal = ({ isOpen, onChange, title, description, children }) => {
  return (
    <Dialog.Root open={isOpen} defaultOpen={isOpen} onOpenChange={onChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-neutral-900/90 backdrop-blur-sm" />
        <Dialog.Content
          className="fixed drop-shadow-md border border-neutral-700 top-[50%] left-[50%] max-h-full h-full md:h-auto 
  md:max-h-[85vh] w-full md:w-[90vw] md:max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-neutral-800 p-[25px] focus:outline-none"
        >
          <Dialog.Close asChild>
            <div className=" text-neutral-400 hover:text-white absolute top-[10px] right-[10px] inline-flex h-[25px] appearance-none items-center justify-center rounded-full focus:outline-none">
              <IoMdClose />
            </div>
          </Dialog.Close>
          <Dialog.Title className="text-white text-2xl font-poppins font-bold text-center">
            {title}
          </Dialog.Title>
          <Dialog.Description className="text-gray-400 text-lg font-poppins font-semibold mt-2 text-center">
            {description}
          </Dialog.Description>
          <div>
            {children} {/* 现在可正常渲染传入的子内容 */}
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

验证逻辑 #

当你使用<Modal>...</Modal>语法时，标签内的内容会自动作为children props传递给组件，只要组件在参数中接收该值，就能正常渲染子内容。

内容的提问来源于stack exchange，提问作者Bogdan Deaconu