JSX 元素类型 'Navbar' 没有任何构造或调用签名

Question

import Navbar from 'react-bootstrap/Navbar'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'

export const NavbarPage = () => {
    return (
      <>
        <Navbar bg="dark" variant="dark">
          <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
          </Container>
        </Navbar>
    </>
    )
}

我浏览了多篇帖子说要导出函数，我发誓我就是这么做的
export const NavbarPage = () => {
但 TS 也不喜欢那样。有什么想法吗？

Answer 1

import { Component } from 'react'
import Navbar from 'react-bootstrap/Navbar'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'

export default class BottomNav extends Component {
  render() {
  return (
      <>
        <Navbar bg="dark" variant="dark" fixed="bottom">
          <Container>
          <Navbar.Brand href="/">Blake Alonzo</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="portfolio">Porfolio</Nav.Link>
            <Nav.Link href="music">Music</Nav.Link>
          </Nav>
          </Container>
        </Navbar>
    </>
    )
  }
}

这是让一切正常工作的更新版本。实现此功能的一种方法是从 React 库扩展 Component class。这允许最多修改 class 并将 Navbar、Container 和 Nav 添加到新创建的 class 中以用于其他组件（页面）。
确保将所有文件导出到组件文件夹，以便在其他组件和 index.tsx 文件中轻松使用它们。

最后，src/index.tsx（因为我使用的是打字稿）需要一个导入行，直接从 bootstrap.min.css 文件获取 CSS。

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

这将是您的进口商品之一。之后这应该会显示在您的页面中。

JSX 元素类型 'Navbar' 没有任何构造或调用签名

JSX element type 'Navbar' does not have any construct or call signatures

typescript

reactjs

react-bootstrap