javascript - 出现 TS 错误， "Property ' 类型 'TPage' 上不存在 child

Question

我有一个这样的组件:

type TPage = {
  title: string;
};
const Page = React.memo(({ children, title, ...rest }: TPage) => {
  return (
    <div {...rest}>
      <div>{title}</div>
      {children}
    </div>
  );
});

我用它作为，

    <Page
      title="Title"
      style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column"
      }}
    >
      <div>Some content</div>
    </Page>

这会引发错误，

const Page = React.memo(({ children, title, ...rest }: TPage) => {
                           ^^^^^^^^
Property 'children' does not exist on type 'TPage'

我尝试通过更改 TType 来修复它至，

type TPage = React.PropsWithChildren<{
  title: string;
  children: React.ReactNode;
}>;

这解决了 children 的问题，但它开始提示 style Prop ，说

Property 'style' does not exist on type 'IntrinsicAttributes
  & { title: string; children: ReactNode; } & { children?: ReactNode; }'

我在这里做错了什么？

Answer 1

TS 不会检查您对 Prop 的操作(使用 title 和 children，然后将其余部分传递给 div)并且不会让您使用任何不在类型中的 Prop 。如果您想扩展 div 的功能使用 JSX用你的 Prop 输入一个工会。

type TPage = JSX.IntrinsicElements["div"] & {
  title: string;
};