打字稿：如何从react-bootstrap

Question

之前我的应用程序位于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：模块＆＃39;＆＃39; react-bootstrap / lib / Button＆＃39;＆＃39;没有默认导出。

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元素类型＆＃39; Button＆＃39;没有任何构造或呼叫签名。

此错误在行<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，因此您必须使用sam，在切换到TypeScript时使用React导入。

<强> JS

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

<强>打字稿

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"
}