Question

我正在尝试使用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;

Answer 1

请将您的导入更改为

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

NavItem不会按原样导出，Nav.Item

Answer 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的文档，该文档需要Bootstrap4。我实际上使用的是0.32。

React Bootstrap：元素类型无效

2 个答案: