我有一个用 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")
)
但它似乎并没有从 Bootstrap 中获取任何样式。
我用谷歌搜索了一下，那里有很多引导教程。但我找不到一个向我展示如何在使用 @types/bootstrap
最佳答案
经过几天的尝试，我能够解决这个问题。
这是在 React 组件中使用 bootstrap 的方式
将 Bootstrap 添加到 typescript 项目
yarn add bootstrap @types/bootstrap react-bootstrap @types/react-bootstrap -D
现在将 Bootstrap 控件添加到您的 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 的示例项目，那么这里有一个示例
关于typescript - 如何在我的 Typescript 和 React 应用程序中使用 @types/bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49703425/