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

Posted 2023-03-13

【中文标题】Typescript：如何从 react-bootstrap 导入特定组件

【英文标题】：Typescript: How to import specific component from react-bootstrap

【发布时间】：2017-09-06 09:11:30

【问题描述】：

之前我的应用位于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 onClick=handleClick bsStyle="danger" bsClass="glyphicon glyphicon-new-window"></Button> 行中的错误

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

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

【问题讨论】：

@ShubhamKhatri 我已经在使用 uglify js。但是当我们使用 import Button from 'react-bootstrap' 时，大小会增加，因为整个 react-bootstrap 被导入，但在 Button 中，Button 组件被导入。经过试验证明尺寸有所增加

嗯，我认为，由于react-bootstrap 的捆绑方式，UglifyJS 不可能只导入所有必要的东西。 require 调用会杀死所有可能的优化。如果你想像@iamsaksham 那样保持你的应用程序尺寸小，这是正确的方法。

@SebastianSebald 我没有测试过，但我认为 Button 应该只导入按钮组件，而不是 的所有内容。如果你比较类似的方法是用解构道具完成

@ShubhamKhatri 不要偏离这个问题，导入react-bootstrap 肯定会增加大小，但react-bootstrap/lib/Button 的大小相当便宜。

是的，它只有imports 和Button，但无论如何它都会将整个库包含在包中:( 如果您从lib 导入，则不会发生这种情况。

【参考方案1】：

由于 TypeScript 遵循 ESModule 规范，但 lib 使用的是 CommonJS，因此您必须使用 sam，您在切换到 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"

【讨论】：

我已经尝试过使用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.

嗯。我用this 来测试它。一切都“在我的机器上”工作。也许这是awesome-typescript-loader 的问题？链接的 CLI 使用 ts-loader。

你从哪里使用了 react-bootstrap 的类型？因为它对我来说 ts-loader 也有同样的错误

我添加了引导程序的dependencies 部分。请注意，如果我以这种方式导入 Button，我没有任何类型 :( 虽然该应用程序可以工作。输入可能不是 100% 正确。

男人！！！这个带有 react-bootstrap 的打字稿正在杀死我，兄弟没有难过的感觉。你能做一个plnkr或jsfiddle吗？我也会解决我的问题