简体   繁体   English

即使在将@types/react-bootstrap 添加到我的项目后,也无法在反应 typescript 项目中使用 react-bootstrap

[英]Unable to use react-bootstrap in react typescript project even after adding @types/react-bootstrap to my project

I am unable to use the react-bootstrap components in my react typescript project even after adding "@types/react-bootstrap".即使添加了“@types/react-bootstrap”,我也无法在我的 react typescript 项目中使用 react-bootstrap 组件。

React Bootstrap is listed in the package.json file. React Bootstrap 列在 package.json 文件中。

This is my SideBar component.这是我的 SideBar 组件。

import React from "react";
import { Navbar } from "react-bootstrap";

const SideBar: React.FC = () => {
  return (
    <>
      <Navbar bg="dark" variant="dark">
        <Navbar.Brand href="#home">
          <img alt="logo" src="./logo.png" width="30" height="30" className="d-inline-block align-top" /> React Bootstrap
        </Navbar.Brand>
      </Navbar>
    </>
  );
};

export default SideBar;

This is index.tsx file这是 index.tsx 文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

This is my error这是我的错误

Failed to compile.

/Users/kishore/Documents/truexam-admin/node_modules/react-bootstrap/esm/index.d.ts
TypeScript error in /Users/kishore/Documents/truexam-admin/node_modules/react-bootstrap/esm/index.d.ts(2,1):
Declaration or statement expected.  TS1128

    1 | export { default as Accordion } from './Accordion';
  > 2 | export type { AccordionProps } from './Accordion';
      | ^
    3 | export { default as AccordionContext } from './AccordionContext';
    4 | export { default as AccordionCollapse } from './AccordionCollapse';
    5 | export type { AccordionCollapseProps } from './AccordionCollapse';

There are two ways you can fix it: either upgrade typescript to 3.8+ or downgrade your react-bootstrap to 1.0.1 as listed in this answer https://stackoverflow.com/a/62942393/5972355 .有两种方法可以修复它:将 typescript 升级到 3.8+ 或将您的 react-bootstrap 降级到 1.0.1,如本答案https://stackoverflow.com/a/62942393/5972355中所列。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM