发现React类型无效

Question

reaeAct.jsx：类型是无效的 - 预期的是字符串（用于内置组件）或类/函数（用于复合组件），但得到：未定义。您可能会忘记将组件从其定义的文件中导出，或者您可能将默认值混合并命名imports。

对于我来说，这对我没有任何意义，因为我像下面一样正确地导入了react-bootstrap模块。

Navigation.tsx

import React from 'react'
import { 
    Navbar,
    Nav,
    NavDropdown,
    NavbarBrand,
    NavbarToggle,
    NavLink,
    NavbarCollapse,
    Container
} from 'react-bootstrap';
// Tried the imports as below but still giving me the type is invalid error
// import NavDropdown from 'react-bootstrap/NavDropdown';
// import Container from 'react-bootstrap/Container';
// import Nav from 'react-bootstrap/Nav';

console.log(Navbar)
const Navigation = () => {
    return (
        <React.Fragment>
            <Navbar expand="lg" className="bg-body-tertiary">
                <Container>
                    <NavbarBrand>React-Bootstrap</NavbarBrand>
                    <NavbarToggle aria-controls="basic-navbar-nav" />
                    <NavbarCollapse id="basic-navbar-nav">
                        <Nav className="me-auto">
                            <NavLink >Home</NavLink>
                            <NavLink >Link</NavLink>
                            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                            // Complains on NavDropdowon.Item
                            <NavDropdown.Item >Action</NavDropdown.Item>
                            <NavDropdown.Item >
                                Another action
                            </NavDropdown.Item>
                            <NavDropdown.Item >Something</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item >
                                Separated link
                            </NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </NavbarCollapse>
                </Container>
            </Navbar>
        </React.Fragment>
    )
}

export default Navigation;

我得出的结论是它不喜欢。这是在（例如：navdropdown.item）之后。我在文档中看到，使用该语法应该没有问题。我该如何解决此问题，或者在进口上缺少什么？

我无法重现错误，这里我使用的POD：

https：//codesandbox.io/p/sandbox/lucid-gwen-kdpsgm

Maybe更新您的问题，例如package.json或您使用该导航栏的位置，这将很有帮助。

Answer 1