链接不能作为链接的后代出现

Question

React.js应用程序发出警告

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. 
See Element > a > ... > a.

那是什么意思？你怎么能阻止它？嵌套链接在HTML,HTML5或React.js中是非法的吗？

Answer 1

这意味着:

<a href="1">
    <a href="2"></a>
</a>

是无效的HTML.浏览器会认识到这一点并将其变为:

<a href="1"></a>
<a href="2"></a>

React警告你这个,因为浏览器的修复将使实际DOM与虚拟DOM不同,当React更新内容时会导致奇怪的错误.

注意React的警告,不要嵌套<a>标签.

Answer 2

我也正在为我的Navigaion收到此警告,我正在使用react-bootstrap在NavItem中呈现React Router Link.

警告:validateDOMNesting <a>不能作为后代出现<a>.在一个(由链接创建)

修复:添加"componentClass"属性以将NavItem呈现为<span>标记而不是<a>标记(您可以在此处使用任何其他标记名称)

我的代码是

<Nav pullRight>
  <NavItem>
    <Link to="/responses">Responses</Link>
  </NavItem>
</nav>

修复后

<Nav pullRight>
  <NavItem componentClass='span'>
    <Link to="/responses">Responses</Link>
  </NavItem>
</nav>

这也弄乱了样式,修复它添加以下CSS

.navbar-nav span[role=button] {
  padding: 15px;
  display: inline-block;
  line-height: 20px;
}