Typescript错误:无法分配给类型'IntrinsicAttributes‘。类型“”IntrinsicAttributes“”上不存在属性“”children“”

Question

我创建了一个弯曲的容器，并试图在我的项目中使用它，但报告了一个错误，我不知道如何解决它，有人有什么想法吗？

import Image from "next/image";
import curveImage from "/public/curve.png";
import curveReverseImage from "/public/curve-reverse.png";
import curveImageBlack from "/public/curve-black.png";
import curveReverseImageBlack from "/public/curve-reverse-black.png";

type Props = {
  children: JSX.Element;
  curveTop?: "white" | "black" | "none";
  curveBottom?: "white" | "black" | "none";
  [defaultParam: string]: any;
};

export default function CurvedContainer({
  children,
  curveTop = "white",
  curveBottom = "white",
  ...rest
}: Props) {
  return (
    <div {...rest} className={`${rest.className} flex flex-col`}>
      {curveTop != "none" && (
        <div className="curveTop" style={{ marginTop: -1 }}>
          <Image
            height="250"
            alt="top image"
            src={
              curveTop == "white" ? curveReverseImage : curveReverseImageBlack
            }
          />
        </div>
      )}

      {children}

      {curveBottom != "none" && (
        <div className="curveTop -mb-2">
          <Image
            height="250"
            alt="top image"
            src={curveBottom == "white" ? curveImage : curveImageBlack}
          />
        </div>
      )}
    </div>
  );
}

我不知道为什么这个错误不幸地出现了。如果有人能帮我，那就太好了！

 <Container
    className="none"
    curveTop="white"
    curveBottom="none"
  >
    <div className="flex flex-row items-center justify-center p-8">
      <a href="#" className={`bg-black text-white font-bold
         tracking-wider text-sm text-center uppercase rounded-full px-8 py-2 shadow-lg `}
        type="button">
        Saiba Mais
      </a>
    </div>
 </Container>

此处出现错误：

​

​

Answer 1

最好对react元素使用React.ReactNode类型，因为它也适用于元素数组。只需更改您的类型

children: JSX.Element;

转到React.ReactNode

Answer 2

您的Container组件有一个属性children、curveTop和curveBottom，当您调用Container组件时，您没有传递children。也试着通过这个道具。