反应引导导航栏未编译

Question

代码片段：

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

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