类型'IntrinsicAttributes & UserSelectProps & { children?: ReactNode; 上不存在属性'isMulti' }'.ts(2322)

Question

我有一个看起来像这样的组件：

      <Controller
        name="members"
        control={control}
        rules={{ required: true }}
        render={({ field }) => (
          <UserSelect
            accountId={accountId}
            label="Project Members"
            isMulti
            {...field}
          />
        )}
      />

它给了我以下 TS 错误（ isMulti上的红色波浪）：

Type '{ onChange: (...event: any[]) => void; onBlur: Noop; value: any; name: "members"; ref: RefCallBack; accountId: string; label: string; isMulti: true; }' is not assignable to type 'IntrinsicAttributes & UserSelectProps & { children?: ReactNode; }'. Property 'isMulti' does not exist on type 'IntrinsicAttributes & UserSelectProps & { children?: ReactNode; }'.ts(2322)

完整的组件可以在这里看到：https://gist.github.com/pivcec/ea9714410f2baaaf9600a28091e9f6b7

UserSelect组件可以在这里看到：https://gist.github.com/pivcec/cb2645bf672324f990b27f6cd597dfcc

Answer 1

如果你想扩展另一个组件，你可以与 Select 的 props 相交。 我相信这是来自react-select ，但最简单的方法是这样的：

type UserSelectProps = {
  accountId: string;
  label: string;
} & Parameters<typeof Select>[0];
// need to index 0, since that is props, 1 is context

react.forwardComponent 也是一个通用组件，所以正确的模式应该是这样的：

const UserSelect = React.forwardRef<UserSelectProps["ref"], Omit<UserSelectProps, "ref>">((props, ref) => {
  //...
})
// the first type parameter is the refType and the second is the propsType

IIRC react-select道具类型是通用的，所以这可能更有用，如下所示：

import { GroupBase } from "react-select";

type UserSelectProps<
  Option = unknown,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
> = {
  accountId: string;
  label: string;
  // This requires TS4.7^ VVV, instantiation expression
} & Parameters<typeof Select<Option, IsMulti, Group>[0];

// Since you didn't provide a sandbox I just wrote this of the top of my head,
// so this may or may not work...
const UserSelect = React.forwardRef(...) as <
  Option = unknown,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
>(props: UserSelectProps<Select, IsMulti, Group>) => JSX.Element