typescript:如何从 react-bootstrap 导入特定组件

IT技术 reactjs typescript react-bootstrap
2021-05-18 09:10:33

早些时候我的应用程序在ReactJs + React-bootstrap. 现在我正在使用Typescript + ReactJs + React-bootstrap

为了减少用于生产的应用程序的大小之前我曾经使用 - 导入 react-bootstrap 组件 import Button from 'react-bootstrap/lib/Button'

添加typescript后,它显示以下错误

[at-loader] ./components/Hello.tsx:6:8 TS1192 中的错误:module“react-bootstrap/lib/Button”没有默认导出。

Trial 1

import {Button} from 'react-bootstrap/lib/Button' 但在这种情况下 Button 未定义。

Trial 2

import * as Button from 'react-bootstrap/lib/Button' 但在这种情况下会弹出另一个错误

[at-loader] ./components/Hello.tsx:54:12 TS2604 中的错误:JSX 元素类型“按钮”没有任何构造或调用签名。

此错误显示行中的错误 <Button onClick={handleClick} bsStyle="danger" bsClass="glyphicon glyphicon-new-window"></Button>

虽然import {Button} from 'react-bootstrap'工作正常,但这不是我们想要的,因为它会导致应用程序的大小增加 200kbs。

我们如何使用 Typescript 从 react-bootstrap 导入特定组件?

1个回答

由于 TypeScript 遵循 ESModule 规范,但lib使用是 CommonJS,因此您必须遵守相同的原则,当您切换到 TypeScript 时,您使用了 React 导入。

JS

import React from 'react'
import Button from 'react-bootstrap/lib/Button'

typescript

import * as React from 'react'
import * as Button from 'react-bootstrap/lib/Button'

无耻的自插:我写了这里的原因我想你以后会再次遇到这个问题:)

这是我使用的版本:

{
  "@types/react-bootstrap": "^0.0.47",
  "react-bootstrap": "^0.30.8"
}