Question

我正在尝试创建一个采用另一种组件类型的React组件，并通过注入一些特定的道具将其返回。

我将其范围缩小到一个简单的示例。像这样应该可以使用：

function MyInput({ name }) {
  return <input name={name} />
}

<Foo component={MyInput} specificProp />

这是我的Foo组件的代码：

import React from 'react';

interface ComponentProps {
  name?: string;
}

interface FooSpecificProps<C extends React.ComponentType<ComponentProps>> {
  component: C;
  specificProp: string;
}

type FooProps<C extends React.ComponentType<ComponentProps>> = Omit<
  React.ComponentPropsWithoutRef<C>,
  keyof FooSpecificProps<C>
> &
  FooSpecificProps<C>;

export default function Foo<C extends React.ComponentType<ComponentProps>>({
  component: Component,
  specificProp,
  ...props
}: FooProps<C>): React.ReactElement {
  return <Component {...props} name={specificProp} />;
}

我收到此错误：

Foo.tsx:23:11 - error TS2322: Type 'Pick<FooProps<C>, Exclude<Exclude<keyof PropsWithoutRef<ComponentProps<C>>, "component" | "specificProp">, "component" | "specificProp">> & { name: string; }' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<C, PropsWithChildren<ComponentProps>>'.
  Type 'Pick<FooProps<C>, Exclude<Exclude<keyof PropsWithoutRef<ComponentProps<C>>, "component" | "specificProp">, "component" | "specificProp">> & { name: string; }' is not assignable to type 'LibraryManagedAttributes<C, PropsWithChildren<ComponentProps>>'.

23   return <Component {...props} name={specificProp} />;
             ~~~~~~~~~

实现代码真的很简单，但是我该如何修正类型呢？

键入需要动态道具的React组件时出现问题

0 个答案: