反应的自举斜面渲染Nav.Link

Question

我目前正在开发与反应，反应的自举一个Web应用程序。一切都运行良好，除了在我的网页顶部我的导航区域的渲染过程。

这个问题看起来如下：我想有几个因素来显示我的导航条内的元素。但每次我的网页显示在Web浏览器中，元素Nav.Link不加载，因此定义为未定义。

Hereis相应的文件：

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;

这里有几个我已经尝试了解决方案的事情：

• 经过反应，引导的官方文档
• 再次下载引导样式表
• 重新配置的WebPack
• 更新反应最新的稳定版本

编辑：我发现了自己的错误的来源。而最新的文档说明开发人员如何利用反应的自举版本1.0.0-beta.5，我是用我的<1.0.0版本与最新的教程。当然，因为这是它解释教程的部件没有在我的设置包括在此没有发挥出来。解决的办法是下载最新的测试版，并从引导4使用样式表，而不是自引导3。

Answer 1

你的问题是你实现它的方式：你把NavLink在Navbar.Collapse包装。这Navbar.Collapse包装是保证您的导航的响应行为的一部分：

使用道具扩大以及在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