如何在 TypeScript 项目中使用 React-Bootstrap

Question

如何在 TypeScript 项目中使用 React-Bootstrap

Aka*_*rma 6 typescript reactjs react-bootstrap

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sha*_*ode 6

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

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

Answer 2

小智 6

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

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

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

归档时间：	7 年，10 月前
查看次数：	34289 次
最近记录：	3 年，4 月前