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

Question

我正在嘗試使用 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>

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 個解決方案

解決方案1
4 已采納 2018-07-24 06:28:30

解決方案2
3 2021-01-18 19:42:39

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

問題描述

2 個解決方案

解決方案1 4 已采納 2018-07-24 06:28:30

解決方案2 3 2021-01-18 19:42:39

解決方案1
4 已采納 2018-07-24 06:28:30

解決方案2
3 2021-01-18 19:42:39