我可以使用 Typescript 输入 React Children 吗？

Question

我正在使用 styled-components 构建消息卡组件。 我试图使其具有尽可能少的逻辑并尽可能少地使用道具，因此我使用 CSS 来设置作为子元素传入的任何<p>或<svg>元素的样式，如下所示：

我也在使用 typescript 并且我想确保作为子项传入的唯一元素类型至少是 1 个段落元素和 1 个 SVG 元素？

例如这样的事情：

type = MessageCardProps = {
  children: [ JSXSVGElement?, JSXParagraphElement, JSXParagraphElement]
}

Answer 1

目前无法以您想要的方式实现它。 不幸的是ReactElement放松了类型检查，如下所述： 如何使用 TypeScript 2.3 中新添加的支持来限制 TypeScript 中的 React Children 的类型？

毕竟Reacts 组合使用道具将其传递给具有适当类型的组件：

import { ComponentPropsWithoutRef, PropsWithChildren } from "react";

type MessageCardProps = PropsWithChildren<{
  icon: ComponentPropsWithoutRef<"svg">;
  title: string;
}>;

function MessageCard({ icon, title, children }: MessageCardProps) {
  return <div>{icon}{title}{children}</div>;
}

export default function App() {
  return (
    <MessageCard icon={<svg></svg>} title="title">
      message
    </MessageCard>
  );
}