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

Question

I am trying to make a nav bar using react-bootstrap I have installed the node-module which is "@types/react-bootstrap": "^0.32.11", and I want to use in my hello.tsx component but it shows compile error Module not found: Error: Can't resolve 'react-bootstrap' in:\\Query Express\\Portal\\src\\components' I don't understand why it is looking for react-bootstrap in component directory我正在尝试使用 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>
        )}
}

Index.html索引.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

This error usually occurs when the node module is not found or possibly incorrectly installed.当找不到节点模块或可能安装不正确时，通常会发生此错误。 So in the case that it is not found or available run the following command npm i react-bootstrap and then make sure it is in your package.json listed under dependencies.因此，如果找不到或不可用，请运行以下命令npm i react-bootstrap ，然后确保它在依赖项下列出的 package.json 中。

If this still doesn't work delete the package-lock.json file and run npm i to install all the packages again.如果这仍然不起作用，请删除package-lock.json文件并运行npm i再次安装所有软件包。 Make sure react-bootstrap is in dependencies before doing so otherwise do npm i react-bootstrap first then npm i在这样做之前确保 react-bootstrap 处于依赖关系中，否则先执行npm i react-bootstrap然后执行npm i

Answer 2

In my case, I just added this line to my index.tsx and after that works just fine:就我而言，我只是将这一行添加到我的 index.tsx 中，然后就可以正常工作了：

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

but before that you need to install the libraries, using this command: npm i react-bootstrap bootstrap但在此之前，您需要使用以下命令安装库： 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