如何将外部链接添加到 react-bootstrap Navbar？

Question

这是我的简单导航栏。 Codepen here:

<Navbar inverse collapseOnSelect>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1}>
        <a href="http://example.com/">
          Example
        </a>
      </NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>

这会产生以下警告：

警告：validateDOMNesting(...): 不能作为 .请参阅应用 > NavItem > SafeAnchor > a > ... > a。

我了解警告来自NavItem 已经生成<a> 元素这一事实。

在寻找SafeAnchor + React的时候，我只能找到this seemingly unrelated NPM package。

最简单的破解方法似乎是将<a> 替换为自定义点击处理<span>：

openLink(href) {
  event.preventDefault();
  window.open(href);
}

...

<span onClick={this.openLink.bind(this, "http://example.com/"}>
  Sandbox
</span>

不确定是否有一个不那么复杂但不那么复杂的解决方案？

Answer 1

您可以使用Navbar.Link 和Navbar.Text 将文本和非导航链接添加到您的Navbar。

Text and Non-nav links

松散的文本和链接可以包装在便利组件中：Navbar.Link 和 Navbar.Text

-- JSFiddle Example --

const { Accordion, Panel, Button, Modal, Form, FormGroup,
       FormControl, ControlLabel, Navbar, Nav, NavItem,
       NavDropdown, MenuItem, Jumbotron
      } = ReactBootstrap;

class App extends React.Component {  
  render() {
    return <Navbar inverse collapseOnSelect>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="#">Brand</a>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav>
          <NavItem eventKey={1} href="#">Link</NavItem>
        </Nav>
        <Navbar.Text>
          <Navbar.Link href="https://google.com" target="_blank">External Link</Navbar.Link>
        </Navbar.Text>
      </Navbar.Collapse>
    </Navbar>;
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);