Question

这是我简单的Navbar。 Codepen here：

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

这会产生以下警告：

警告：validateDOMNesting（...）：不能作为后代出现。请参阅App＆gt; NavItem＆gt; SafeAnchor＆gt; a＆gt; ...＆gt;一个。

我了解警告来自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')
);

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

1 个答案: