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

Question

这是我的简单导航栏。代码笔在这里：

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

这会生成以下警告：

警告：validateDOMNesting(...): 不能作为 的后代出现。请参阅 App > NavItem > SafeAnchor > a > ... > a。

我知道警告来自NavItem已经生成<a>元素的事实。

在找SafeAnchor+React的时候，只能找到这个看似无关的NPM包。

最简单的 hack-around 似乎<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.

文本和非导航链接

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

-- JSFiddle 示例 --

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')
);