React Bootstrap：元素类型无效答案

【问题标题】：React Bootstrap: Element type is invalidReact Bootstrap：元素类型无效
【发布时间】：2019-07-04 18:02:58
【问题描述】：

我正在尝试使用 React Bootstrap Navbar 作为我的组件之一。但是，每当我复制代码并尝试渲染它时，都会出现以下错误：

`元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查NewSiteNav的渲染方法`

我已尽我所能对其进行故障排除，我以不同的方式导入/导出了组件，更新了react、react-bootstrap 和react-dom，但没有成功。但是，当我注释掉导航栏代码并将其替换为普通 JSX 时，它工作正常。

这是组件：

import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import './NewSiteNav.css';

class NewSiteNav extends Component {


    render() {

        return (
                <div>
                    <Navbar collapseOnSelect>
                        <Navbar.Collapse>
                            <Nav defaultActiveKey="">
                                <Nav.Item>
                                    <Nav.Link href="">Active</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="">Option 2</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link eventKey="" disabled>
                                    Disabled
                                    </Nav.Link>
                                </Nav.Item>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
        )
    }
}

export default NewSiteNav;

【问题讨论】：

您是否在索引文件中导入了引导程序？
@MonicaAcha 是的 :)
您确定它是 Nav.Item 而不是 NavItem 吗？ bcz 错误表明您正在使用未定义的东西
如何居中对齐导航项？
@aravind_reddy 我相信 NavItem 和 Nav.Item 之间的差异是 React-Bootstrap 1.0 beta 中的重大变化。

标签： javascript reactjs

【解决方案1】：

请将您的导入更改为

import { Navbar, Nav } from 'react-bootstrap';

NavItem 没有像 Nav.Item 那样导出

【讨论】：

感谢您的帮助，尽管 Nav.Link 仍然存在问题。如果我删除它们，它会起作用。
虽然我有你，你能告诉我如何在导航栏中居中对齐导航项目吗？

【解决方案2】：

涉及import 的答案针对的是 NodeJS，但是这个问题没有被标记为 NodeJS，当我的脚本内联在 index.html 中时，我在 Flask 中得到了同样的结果。

我觉得这很有帮助：

const Tab = ReactBootstrap.Tab;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;
const Nav = ReactBootstrap.Nav;
const NavItem = ReactBootstrap.NavItem;

// other code ...

  <Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}>
    <NavItem eventKey={1} href="/home">
      NavItem 1 content
    </NavItem>
    <NavItem eventKey={2} title="Item">
      NavItem 2 content
    </NavItem>
    <NavItem eventKey={3} disabled>
      NavItem 3 content
    </NavItem>
  </Nav>

我也遇到了一些问题，因为我很笨，并且正在关注 React-Bootstrap 1.0 beta 的文档，这需要 Bootstrap 4。我实际上使用的是 0.32。

【讨论】：