如何在我的 Typescript 和 React 应用程序中使用 @types/bootstrap

Question

如何在我的 Typescript 和 React 应用程序中使用 @types/bootstrap

我有一个用 webpack、typescript 和 react 编写的应用程序。我向它添加了引导程序

yarn add bootstrap @types/bootstrap jquery popper

Run Code Online (Sandbox Code Playgroud)

然后我写了一个组件

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as Bootstrap from 'bootstrap'

class Main extends React.Component {
  render() {
    return (
      <div className="container">
        <h1 className="page-header">Hello</h1>
        <p className="text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>  
    )
  }
}
ReactDOM.render(
  <Main />,
  document.getElementById("root")
)

Run Code Online (Sandbox Code Playgroud)

但它似乎没有从引导程序中获取任何样式。

我用谷歌搜索，那里有很多引导教程。但我找不到一个向我展示如何在使用的打字稿应用程序中使用引导程序的@types/bootstrap

Answer 1

Kno*_*uch 6

经过几天的尝试，我能够解决这个问题。

这就是你在 React 组件中使用 bootstrap 的方式

将引导程序添加到打字稿项目

 yarn add bootstrap @types/bootstrap react-bootstrap @types/react-bootstrap -D

Run Code Online (Sandbox Code Playgroud)

现在将引导程序控件添加到您的 tsx 文件中，例如

 import {Grid, Row, Col, Button} from 'react-bootstrap'

Run Code Online (Sandbox Code Playgroud)

由于 css 文件不包含在 npm 中，因此您需要手动链接 css。我在<HEAD>index.html 部分做了这个（包含）

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

Run Code Online (Sandbox Code Playgroud)

就是这样。

如果您正在寻找使用 typescript、react、bootstrap 和 webpack 的示例项目，那么这里是一个示例

https://github.com/abhsrivastava/ts-react-bootstrap

归档时间：	7 年，7 月前
查看次数：	8756 次
最近记录：	7 年，7 月前