早些时候我的应用程序位于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:模块“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”没有任何构造或调用签名。
此错误显示行中的错误<Button onClick={handleClick} bsStyle="danger" bsClass="glyphicon glyphicon-new-window"></Button>
Though import {Button} from 'react-bootstrap'
工作正常,但这不是我想要的,因为它会导致应用程序的大小增加 200kbs。
我们如何使用 Typescript 从 React-Bootstrap 导入特定组件?
由于 TypeScript 遵循 ESModule 规范,但lib
使用 CommonJS,你必须这样做,当你切换到 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 https://medium.com/@sebastiansebald/typescript-the-nitty-gritty-parts-85313547a182。我想你以后还会遇到这个问题:)
这是我使用的版本:
{
"@types/react-bootstrap": "^0.0.47",
"react-bootstrap": "^0.30.8"
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)