Question

我正在尝试使用react-bootstrap制作导航栏，我安装了"@types/react-bootstrap": "^0.32.11",节点模块，我想在我的hello.tsx组件中使用，但显示编译错误找不到模块：错误：无法在以下位置解析“ react-bootstrap”：\ 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>
        )}
}

Index.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>

Answer 1

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

如果仍然不起作用，请删除package-lock.json文件，然后运行npm i重新安装所有软件包。在这样做之前，请确保react-bootstrap处于依赖状态，否则先进行npm i react-bootstrap然后进行npm i

Answer 2

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

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

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

如何在打字稿项目中使用react-bootstrap

2 个答案: