react-bootstrap 无法渲染 Nav.Link

Question

我目前正在使用 React 和 react-bootstrap 开发一个 Web 应用程序。除了网页顶部导航区域的渲染过程外，一切都运行良好。

问题如下： 我想在导航栏中显示一个带有几个元素的元素。但是每次我的页面显示在网络浏览器中时，元素 Nav.Link 都不会加载，因此定义为未定义。

这是对应的文件：

import React,{Component} from 'react';
import './HorizontalNavBar.css';
import atom from './res/atom.svg';
import file from './res/file_icon.svg';
import tag  from './res/tag.svg';
import user from './res/user_icon.svg';
import {Navbar,Nav,NavDropdown,Form,FormControl} from 'react-bootstrap';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';

class HorizontalNavBar extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state =
    {
      actions:["Files","TagManager","Profile"],
    };
  }

  render()
  {
    return(
        <Navbar bg="dark" variant="dark" expand="lg">
            <Navbar.Brand href="#">
                <img 
                    src={atom}
                    alt="Logo"/>
                    SciTag
            </Navbar.Brand>
            <Navbar.Collapse>
                            <Nav>
                                <Nav.Link href="#home">Home</Nav.Link>
                            </Nav>
        </Navbar.Collapse>
        </Navbar>
);
}
}

export default HorizontalNavBar;

以下是我已经尝试过的一些解决方案：

• 查看了 react-bootstrap 的官方文档
• 再次下载引导样式表
• 重新配置的 webpack
• 将 React 更新到最新的稳定版本

编辑： 我自己发现了错误的根源。虽然最新的文档解释了开发人员如何使用 react-bootstrap 版本 1.0.0-beta.5，但我使用的是我的

Answer 1

您的问题在于您实施它的方式： 您将 NavLink 放在 Navbar.Collapse Wrapper 中。 Navbar.Collapse 包装器是确保导航响应行为的一部分：

使用 expand 道具以及 Navbar.Toggle 和 Navbar.Collapse 组件来控制内容何时折叠在按钮后面。

请看这里：https://react-bootstrap.github.io/components/navbar/

事实上，您的 NavLink 项目在那里 - 但您看不到它，因为它是隐藏的，除非您按下 Navbar.Toggle 项目。由于您暂时没有实施该项目，因此根本无法看到它。

现在您有两个选择：在没有响应行为的情况下实现导航栏组件或使用它。

选项 1，没有响应行为（我们删除了 Navbar.Collapse 包装器）：

<Navbar bg="dark" variant="dark" expand="lg">
  <Navbar.Brand href="#">SciTag</Navbar.Brand>
  <Nav>
    <Nav.Link href="#home">Home</Nav.Link>
  </Nav>
</Navbar>

选项 2，具有响应式行为（我们添加了带有一些选项的 Navbar.Collapse 包装器）

<Navbar collapseOnSelect bg="dark" variant="dark" expand="lg">
  <Navbar.Brand href="#">SciTag</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse>
      <Nav>
        <Nav.Link href="#home">Home</Nav.Link>
      </Nav>
    </Navbar.Collapse>
</Navbar>

工作沙盒：https://codesandbox.io/s/8l85rqqk8