Question

React.js应用程序提供警告

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

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

Answer 1

我也收到了Navigaion的警告，我正在使用react-bootstrap在NavItem中呈现React Router Link。

警告：validateDOMNesting <a>无法显示为<a>的后代。在a（由链接创建）

修复：添加＆＃34; componentClass＆＃34;属性将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;
}

Answer 2

这意味着：

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

HTML无效。浏览器会认识到这一点并将其变为：

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

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

注意React的警告，不要嵌套<a>标签。

Answer 3

这是什么意思？

这意味着：

<a href="http://example.com">
  <span>
    <a href="http://example.net">
        ...
    </a>
  </span>
</a>

和

<a href="http://example.com">
    <a href="http://example.net">
        ...
    </a>
</a>

和类似的结构是不允许的。无论如何，他们没有意义。

你怎么能阻止它？

如果没有人编写试图执行此操作的代码，就不会发生这种情况。

您需要找到该代码并进行更改。

嵌套链接在HTML，HTML5或React.js中是非法的吗？

它们在所有HTML版本中都是非法的。第一个HTML的DTD是作为HTML 2的一部分发布的。它说：

<!ELEMENT A     - - %A.content -(A)>

最后一部分描述了元素中允许的内容。 -(A)部分意味着＆＃34;除了A元素＆＃34;。

HTML 5只是2014年的HTML更新。 HTML 5.1去年问世了。 HTML 5.2正在制定中。

React.js是一个生成HTML DOM的JavaScript库。结果仍然是（某种程度上）HTML。

Answer 4

您可以使用函数代替'a'标记：

import React from 'react';
import PropTypes from 'prop-types';
import {Link, withRouter} from 'react-router';

   class SomeClass extends React.Component {
    constructor(props,context) {
        super(props,context);
        this.redirect = this.redirect.bind(this);
    }

    redirect(target){
        this.context.router.push("/path");
    }



render() {
        return (
            <div>
                <p onClick={this.redirect}>Link</p>
            </div>
        );
    }
}

SomeClass.contextTypes ={
    router: PropTypes.object
};

export default SomeClass;

小心使用Coursera course。我只使用上下文进行路由。

   class SomeClass extends React.Component {
    constructor(props,context) {
        super(props,context);
        this.redirect = this.redirect.bind(this);
    }

Answer 5

反应路由器NavLink it Measure-Command -Expression { $count = 10000 # There's a -le, so count+1 is needed to contain all the values # Allocate large enough an array $myitems = @(0)*($count+1) for ($x=0; $x -le $count; $x++) { $myitems[$x] = @([pscustomobject]@{key=$x.path;ID="i'm a value"}) } } | Select-Object -Property TotalMilliSeconds TotalMilliseconds ----------------- 115,2909标签在幕后，因此，当您将导航栏转换为反应路由器时，它经常发生，而忘记了从链接中删除标签。这导致嵌套链接。

如何解决：只需删除<a>中的<a>标签即可。您不需要它，<NavLink>为您量身定做。

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

5 个答案: