gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 21:22:52 24 4
gpt4 key购买 nike

我正在尝试使用 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>

最佳答案

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

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

关于reactjs - 如何在 typescript 项目中使用 react-bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51491535/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com