React bootstrap NavBar 未编译

Question

代码sn-p：

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

class Navigation extends Component {
  render(){
    return (

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        Github Searcher
      </Navbar.Brand>
    </Navbar.Header>

    <Nav>
      <NavItem href="#"> Login </NavItem>
    </Nav>
  </Navbar>

    )
  }
}
export default Navigation;

收到此错误消息：

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

Answer 1

我可以重现您的错误消息，我为您发现了 2 个问题。

第一期：

import 部分有一个小错字。如果将第一行从Import React, { Component } from 'react' 更改为import React, { Component } from 'react'，则可以更正。

第二期：

这与Element type is invalid: expected a string错误信息有关。

在react-bootstrap 文档中，我找到了NavbarHeader 的以下内容：

已移除，在 v4 中不存在

所以Navbar.Header 需要被删除，它会像魅力一样工作。

我猜你可以这样做：

class Navigation extends Component {
  render() {
    return (
      <Navbar>
        <Navbar.Brand>
          Github Searcher
        </Navbar.Brand>

        <Nav>
          <NavItem href="#"> Login </NavItem>
        </Nav>
      </Navbar>
    )
  }
}

希望对你有帮助。

Answer 2

第一行的导入应替换为导入。 不包括组件。