Question

我目前正在使用React和react-bootstrap开发一个Web应用程序。除了网页顶部导航区域的渲染过程之外，其他所有内容都运行正常。

问题如下所示：我想在导航栏中显示一个包含两个元素的元素。但是，每次我的页面显示在Web浏览器中时，元素Nav.Link都不会加载，因此定义为undefined。

此处为相应文件：

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的官方文档
再次下载了Bootstrap样式表
重新配置的webpack
已将React更新到最新的稳定版本

修改：我自己发现了错误的根源。尽管最新文档解释了开发人员如何使用react-bootstrap版本1.0.0-beta.5，但我使用的<1.0.0版本带有最新的教程。当然，这没有奏效，因为在本教程中未包含本教程中解释的组件。解决方案是下载最新的Beta版本，并使用Bootstrap 4（而不是Bootstrap 3）中的样式表。

Answer 1

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

使用扩展道具以及Navbar.Toggle和Navbar.Collapse组件来控制内容何时隐藏在按钮后面。

请在此处查看：https://react-bootstrap.github.io/components/navbar/

实际上，您的NavLink项在那里-但是您看不到它，因为除非您按Navbar.Toggle项，否则它是隐藏的。由于您目前尚未实现该项目，因此根本看不到它。

现在，您有两个选择：实现没有响应行为或带有响应行为的Navbar组件。

选项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

react-bootstrap无法呈现Nav.Link

1 个答案: