NextJs 将一个组件嵌套到另一个组件中（不是 FC）

Question

我构建了一个模块，然后将其分解为组件并尝试将其重新组合在一起。

组件工作。一些组件位于另一个组件的 div 中。

我曾尝试将它们放入一个 div 脚手架中，但我当时正在编写更多的 css 来将模块组合在一起。

我以为我们只是这样做：

<CompOne>
   <CompTwo />
</CompOne>

这给出了一个错误：

输入'{ children: Element; }' 与类型 'IntrinsicAttributes' 没有共同的属性。

所以也许上面写的是我需要打字稿？抱歉找不到这方面的工作示例。

function WaldoEye() {
    return (
        <WaldoEyeball>
            <WaldoRetina/>
        </WaldoEyeball>

    )
}

export default WaldoEye

function WaldoEyeball() {
    return (
        <div className="
          flex 
          relative
          items-center 
          opacity-90 
          w-40 h-40 
          rounded-full 
          shadow-[inset_0_-15px_15px_-3px_rgba(5,10,255,0.3)]
          bg-gradient-to-r 
          from-slate-50 
          via-slate-100 
          to-slate-50 
        ">
            <div className="
                absolute
                flex 
                items-center 
                opacity-90 
                w-40 h-40 
                rounded-full 
                shadow-[0_60px_55px_-25px_rgba(255,255,255,0.4)]
            ">
            </div>
        </div>
    )
}

export default WaldoEyeball

function WaldoRetina() {
    return (
        <>
            <div className="
                flex 
                items-center 
                relative
                mx-auto 
                w-16 
                h-16 
                rounded-full 
                border-2 
                border-sky-500 
                bg-gradient-radial
                from-cyan-500 
                via-sky-300 
                to-sky-500
            ">
            </div>
        </>
    )
}

export default WaldoRetina

Answer 1

所以也许上面写的是我需要打字稿？抱歉找不到这方面的工作示例。

目前 WaldoEyeball 组件不期望任何 children。您需要调整 WaldoEyeball 组件中的属性，使其接受 children。

const WaldoEyeball: FC = ({ children }) => {
   return (
      <div className="
      flex 
      relative
      items-center 
      opacity-90 
      w-40 h-40 
      rounded-full 
      shadow-[inset_0_-15px_15px_-3px_rgba(5,10,255,0.3)]
      bg-gradient-to-r 
      from-slate-50 
      via-slate-100 
      to-slate-50 
    ">
        <div className="
            absolute
            flex 
            items-center 
            opacity-90 
            w-40 h-40 
            rounded-full 
            shadow-[0_60px_55px_-25px_rgba(255,255,255,0.4)]
        ">
          {children} // drop children somewhere to render it
        </div>
    </div>
   );
}