javascript - 如何添加外部链接到 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>

这会产生以下警告:

Warning: validateDOMNesting(...): cannot appear as a descendant of . See App > NavItem > SafeAnchor > a > ... > a.

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

寻找时SafeAnchor + React，我只能找到 this seemingly unrelated NPM package .

最简单的 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。

Text and Non-nav links

Loose text and links can be wraped in the convenience components: Navbar.Link and 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')
);