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

Question

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

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

添加Typescript后出现如下错误

ERROR in [at-loader] ./components/Hello.tsx:6:8 TS1192: Module ''react-bootstrap/lib/Button'' has no default export.

Trial 1

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

Trial 2

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

ERROR in [at-loader] ./components/Hello.tsx:54:12 TS2604: JSX element type 'Button' does not have any construct or call signatures.

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

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

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

Answer 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'

不要脸的自插:我写过这个的原因here .我猜你以后会再次遇到这个问题:)

这是我使用的版本:

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