我已经确定了一个出口多个电灯的icon图书馆。 每个Icon公司都向内部挖掘工作投射。 例如:

type ReactIconProps = SVGProps<SVGSVGElement>;

function CheckIconInner(props: ReactIconProps, ref: Ref<SVGSVGElement>) {
  return (
    <svg
      fill="none"
      height="1em"
      ref={ref}
      stroke="currentColor"
      viewBox="0 0 24 24"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M20 6L9 17L4 12"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
      />
    </svg>
  );
}
const CheckIcon = forwardRef(CheckIconInner);

I want to use these icons as a prop in a button component so that the button can include an icon. See below:

type ReactButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

export interface ButtonProps extends ReactButtonProps {
  Icon?: ComponentType<ReactIconProps>;
}

function Button({ children, Icon, ...props }: ButtonProps) {
  return (
    <button {...props}>
      {Icon !== undefined && <Icon />}
      {children}
    </button>
  );
}

export default function App() {
  return <Button Icon={CheckIcon}>OK</Button>;
}

但是,如果将icon转至纽特州(<Button Icon={CheckIcon}>OK</Button>):

TS2322: Type  ForwardRefExoticComponent<Omit<ReactIconProps, "ref"> & RefAttributes<SVGSVGElement>>  is not assignable to type  ComponentType<ReactIconProps> | undefined .
  Type  ForwardRefExoticComponent<Omit<ReactIconProps, "ref"> & RefAttributes<SVGSVGElement>>  is not assignable to type  FunctionComponent<ReactIconProps> .
    Types of parameters  props  and  props  are incompatible.
      Type  ReactIconProps  is not assignable to type  Omit<ReactIconProps, "ref"> & RefAttributes<SVGSVGElement> .
        Type  SVGProps<SVGSVGElement>  is not assignable to type  RefAttributes<SVGSVGElement> .
          Types of property  ref  are incompatible.
            Type  LegacyRef<SVGSVGElement> | undefined  is not assignable to type  Ref<SVGSVGElement> | undefined .
              Type  string  is not assignable to type  Ref<SVGSVGElement> | undefined .

问题是,“icon”要求退约,但我们不是通过。

Two questions:

1. How can we specify that the ref passed to icon component is optional?
2. Is the use of ref in the Icon component a good practice? I have seen lots of advice that refs should not be overused, but see that may component libraries use it extensively.

<><>Edit>/strong>