如何键入 Reactstrap 的 Spinner 的 Wrapper 反应函数？

Posted 2023-03-23

【中文标题】如何键入 Reactstrap 的 Spinner 的 Wrapper 反应函数？

【英文标题】：How to type Wrapper react function of Spinner of Reactstrap?

【发布时间】：2020-12-21 03:08:27

【问题描述】：

我尝试为 Spinner 制作自定义默认道具，因此我尝试制作 SpinnerAProps 接口，该接口扩展了 Reactstrap 的 SpinnerProps，Spinner 也使用如下：

declare class Spinner<T = [key: string]: any> extends React.Component<SpinnerProps> 

这是 Reactstrap 的 SpinnerProps

export interface SpinnerProps extends React.htmlProps<HTMLElement> 
    [key: string]: any;
    tag?: string | React.ReactType;
    type?: string;
    size?: any;
    color?: string;
    className?: string;
    cssModule?: CSSModule;

这对我来说似乎没问题，因为SpinnerAProps 接口使用相同的接口

但它抱怨

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<SpinnerProps>): Spinner< [key: string]: any; >', gave the following error.
    Type ' tag?: string | ComponentClass<any, any> | FunctionComponent<any> | undefined; type?: string | undefined; size: any; color?: string | undefined; ... 359 more ...; animation: string; ' is not assignable to type 'IntrinsicClassAttributes<Spinner< [key: string]: any;
 >>'.
      Types of property 'ref' are incompatible.
        Type 'string | ((instance: HTMLElement | null) => void) | RefObject<HTMLElement> | null | undefined' is not assignable to type 'string | ((instance: Spinner< [key: string]: any; > | null) => void) | RefObject<Spinner< [key: string]: any; >> | null | undefined'.    
          Type '(instance: HTMLElement | null) => void' is not assignable to type 'string | ((instance: Spinner< [key: string]: any; > | null) => void) | RefObject<Spinner< [key: string]: any; >> | null | undefined'.
           ...

import React from 'react'
import  Spinner, SpinnerProps  from 'reactstrap'
import './Spinner.scss'

interface SpinnerAProps extends SpinnerProps 

const SpinnerA = ( ...rest : SpinnerAProps) => 
  return <Spinner animation="grow" size="sm" role="status" aria-hidden="true" ...rest></Spinner>


export default SpinnerA

为什么会这样以及如何解决？谢谢

我发现了一个线索 它抱怨是因为 HTMLProps 的 AllHTMLAttributes, ClassAttributes

【参考方案1】：

我发现从 props 中解构 ref 是一个解决方案。 ButtonProps from the package is incompatible with Button component from the package

import React from 'react'
import  Spinner, SpinnerProps  from 'reactstrap'
import './Spinner.scss'

interface SpinnerAProps extends SpinnerProps 

const SpinnerA = ( ref, ...rest : SpinnerAProps) => 
  return (
    <Spinner
      as="span"
      animation="grow"
      size="sm"
      role="status"
      aria-hidden="true"
      ...rest
    ></Spinner>
  )


export default SpinnerA