如何在 typescript 项目中使用 react-bootstrap答案

【问题标题】：How to use react-bootstrap in typescript project如何在 typescript 项目中使用 react-bootstrap
【发布时间】：2018-12-31 15:47:16
【问题描述】：

我正在尝试使用 react-bootstrap 制作导航栏我已经安装了节点模块 "@types/react-bootstrap": "^0.32.11", 并且我想在我的 hello.tsx 组件中使用，但它显示编译错误 Module not found: Error: Can 't resolve 'react-bootstrap' in:\Query Express\Portal\src\components' 我不明白为什么它在组件目录中寻找 react-bootstrap

import * as React from "react";
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from "react-bootstrap";

export interface IHelloProps { compiler: string; framework: string; }

// 'helloProps' describes the shape of props.
// state is never set so we use the '{}' type.
export class Hello extends React.Component<IHelloProps, {}> {
    render() {
        return(
        <div>
            <Navbar inverse>
  <Navbar.Header>
    <Navbar.Brand>  
      <a href="#brand">React-Bootstrap</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">
        Link
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link
      </NavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>Action</MenuItem>
        <MenuItem eventKey={3.2}>Another action</MenuItem>
        <MenuItem eventKey={3.3}>Something else here</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.3}>Separated link</MenuItem>
      </NavDropdown>
    </Nav>
    <Nav pullRight>
      <NavItem eventKey={1} href="#">
        Link Right
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link Right
      </NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>
        <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;                                                                                                                                                            
        </div>
        )}
}

索引.html

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="app"></div>

        <!-- Main -->
        <link href="./src/css/lib/_bootstrap.min.css" rel="stylesheet"></link>
        <script src="./dist/main.bundle.js"></script>
        <script src="./dist/nodeModules.bundle.js"></script>
    </body>
</html>

【问题讨论】：

你的项目中是否包含了 react-bootstrap？ npm i react-bootstrap
@SharpCode npm install --save @types/react-bootstrap
发布的答案，您只安装了定义而不是实际的包

标签： reactjs typescript react-bootstrap

【解决方案1】：

此错误通常发生在未找到或可能未正确安装节点模块时。因此，如果找不到或不可用，请运行以下命令 npm i react-bootstrap，然后确保它位于依赖项下列出的 package.json 中。

如果这仍然不起作用，请删除 package-lock.json 文件并运行 npm i 以再次安装所有软件包。在这样做之前确保 react-bootstrap 处于依赖关系中，否则先执行npm i react-bootstrap，然后执行npm i

【讨论】：

代码正在编译，但我没有看到任何导航栏，我还在我的html中链接了<link href="./src/css/lib/_bootstrap.min.css" rel="stylesheet"></link>
@AkashVishwakarma 尝试从react-bootstrap.github.io/getting-started/introduction 添加 cdn 链接，看看它是否有效。不确定您使用的是什么捆绑器，但可能是 ./src/css/lib/_bootstrap.min.css 未加载或您的捆绑器设置不正确

【解决方案2】：

就我而言，我只是将这一行添加到我的 index.tsx 中，然后就可以正常工作了：

导入'bootstrap/dist/css/bootstrap.min.css';

但在此之前，您需要使用以下命令安装库： npm i react-bootstrap bootstrap

【讨论】：

我遇到了同样的问题，添加您的线路解决了它，谢谢！