Question

我有一个用webpack，typescript和react编写的应用程序。我像

一样添加了bootstrap

yarn add bootstrap @types/bootstrap jquery popper

然后我写了一个像

这样的组件

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

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

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

Answer 1

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

这就是你在反应组件中使用bootstrap的方法

将bootstrap添加到typescript项目

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

现在将引导控件添加到tsx文件中，如

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

由于npm中不包含css文件，因此需要手动链接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">

就是这样。

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

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

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

1 个答案: