Fatal编程技术网
  • reactjs/
  • Reactjs 如何在typescript项目中使用react引导

Reactjs 如何在typescript项目中使用react引导

reactjs typescript

Reactjs 如何在typescript项目中使用react引导,reactjs,typescript,react-bootstrap,Reactjs,Typescript,React Bootstrap,我正在尝试使用react-bootstrap制作导航条。我已安装节点模块，“@types/react-bootstrap”：“^0.32.11”，我想在hello.tsx组件中使用，但它显示未找到编译错误模块：错误：无法在：\Query Express\Portal\src\components'中解析“react bootstrap”，我不明白它为什么要在组件目录中查找react bootstrap import * as React from "react"; import { Navbar

我正在尝试使用react-bootstrap制作导航条。我已安装节点模块，
“@types/react-bootstrap”：“^0.32.11”，
我想在hello.tsx组件中使用，但它显示未找到编译错误模块：错误：无法在：\Query Express\Portal\src\components'中解析“react bootstrap”，我不明白它为什么要在组件目录中查找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>
        )}
}

import*as React from“React”；
从“react bootstrap”导入{Navbar、Nav、NaviItem、NavDropdown、MenuItem}；
导出接口IHelloProps{compiler:string；framework:string；}
//“helloProps”描述道具的形状。
//状态从未设置，因此我们使用“{}”类型。
导出类Hello扩展React.Component{
render（）{
返回(
链接
链接
行动
另一个动作
还有别的吗
分离环
链接权
链接权
来自{this.props.compiler}和{this.props.framework}的你好！；
)}
}
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>
当未找到节点模块或可能安装不正确时，通常会发生此错误。因此，如果找不到或不可用，请运行以下命令
npm i react bootstrap
，然后确保它位于您的package.json中的dependencies下

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

在我的情况下，我刚刚将这一行添加到index.tsx中，之后就可以正常工作了：

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

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

您的项目中是否包含react bootstrap
npm i react bootstrap
@SharpCode
npm安装--save@types/react bootstrap
发布的答案，您只安装了定义，而不是实际的程序包正在编译代码，但我没有看到任何导航栏，我还在我的html@AkashVishwakarma请尝试从添加cdn链接，看看它是否有效。不确定您使用的绑定器是什么，但可能是
/src/css/lib/\u bootstrap.min.css
没有加载，或者您的绑定器设置不正确。我遇到了同样的问题，添加您的产品线解决了问题，谢谢！