TS2339错误：类型'typeof Button'上不存在属性'Ripple'如何解决

• 原生reactstrap的Button组件本身没有内置Ripple子组件，该写法常见于Material UI、PrimeReact等其他UI库，或是项目内二次封装过的自定义Button组件，你当前导入的是reactstrap原生Button，自然不存在该属性。
• 如果你的项目之前可以正常使用Button.Ripple，大概率是你误将封装后的Button导入替换成了reactstrap原生的Button。

方法1：直接改用reactstrap原生Button（最省心） #

删除.Ripple后缀，直接使用Button组件，如果需要涟漪动效自己补CSS或者自定义封装即可，代码调整如下：

import { Link } from 'react-router-dom'

// ** Third Party Components
import { Card, CardBody, Button } from 'reactstrap'

const PreviewActions = ({ id, setSendSidebarOpen, setAddPaymentOpen }) => {
  return (
    <Card className='invoice-action-wrapper'>
      <CardBody>
        <Button color='primary' block className='mb-75' onClick={() => setSendSidebarOpen(true)}>
          Send Invoice
        </Button>
        <Button color='secondary' block outline className='mb-75'>
          Download
        </Button>
        {/* 剩余原有代码保持不变即可 */}
      </CardBody>
    </Card>
  )
}

如果需要保留涟漪效果，可以自己给Button加对应的CSS动画，网上有很多现成的ripple CSS代码可直接复用。

方法2：修正导入来源 #

如果你确实需要使用带Ripple子组件的Button，检查你使用的UI库是否和导入匹配，替换正确的导入语句即可。

方法3：补充TypeScript类型声明 #

如果确认项目内已经封装了Button.Ripple组件，只是TypeScript没有识别到对应类型，可以在项目的类型声明文件（通常是xxx.d.ts）中补充类型：

import { Button } from 'reactstrap';

declare module 'reactstrap' {
  interface ButtonComponent {
    Ripple: React.FC<React.ComponentProps<typeof Button>>;
  }
}

补充后重启TS服务即可消除报错。

内容的提问来源于stack exchange，提问作者GrayHat