react-router – 在navitem中的React-Bootstrap链接项

前端之家收集整理的这篇文章主要介绍了react-router – 在navitem中的React-Bootstrap链接项前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用反应路由器和反应引导有一些造型问题。下面是代码片段
import { Route,RouteHandler,Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button,Nav,Navbar,NavDropdown,MenuItem,NavItem } from 'react-bootstrap';

    <Nav pullRight>
      <NavItem eventKey={1}>
        <Link to="home">Home</Link>
      </NavItem>
      <NavItem eventKey={2}>
        <Link to="book">Book Inv</Link>
      </NavItem>
      <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
        <MenuItem eventKey="3.1">
          <a href="" onClick={this.logout}>logout</a>
        </MenuItem>          
      </NavDropdown>  
    </Nav>

这是渲染时的外观。

我知道< Link>< / Link>是造成这个,但我不知道为什么?我想这样做是在线的。

你不应该把锚放在NavItem里面。通过这样做,您将在控制台中看到警告:

警告:validateDOMNesting(…):< a>不能显示为< a>的后裔。参见标题> NavItem> SafeAnchor> a> …>链接>一个。

这是因为当NavItem渲染时,锚(NavItem的直接子代)已经存在。

由于上述的警告,反应将被迫把这两个锚点当作兄弟姐妹,这样造成了风格问题。

猜你在找的React相关文章