Javascript 链接不能作为链接的后代出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42561137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Link cannot appear as a descendant of a link
提问by 0x4a6f4672
A React.js app gives the warning
React.js 应用程序发出警告
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
See Element > a > ... > a.
What does that mean? How can you prevent it? Are nested links illegal in HTML, HTML5 or React.js?
这意味着什么？你怎么能预防呢？HTML、HTML5 或 React.js 中的嵌套链接是否非法？
回答by bowheart
That means:
这意味着：
<a href="1">
<a href="2"></a>
</a>
Is invalid HTML. Browsers will recognize this and turn this into:
无效的 HTML。浏览器将识别这一点并将其转换为：
<a href="1"></a>
<a href="2"></a>
React warns you about this because the browser's fix will make the actual DOM different from the virtual DOM, leading to strange bugs when React goes to update stuff.
React 会警告你这一点，因为浏览器的修复会使实际 DOM 与虚拟 DOM 不同，当 React 更新内容时会导致奇怪的错误。
Heed React's warning and don't nest <a>tags.
注意 React 的警告，不要嵌套<a>标签。
回答by Sandeep Kamble
I was also getting this warning for my Navigaion, I was using react-bootstrap to render React Router Link in NavItem.
我的 Navigaion 也收到了这个警告，我使用 react-bootstrap 在 NavItem 中渲染 React Router Link。
Warning: validateDOMNesting
<a>cannot appear as a descendant of<a>. in a (created by Link)
警告：validateDOMNesting
<a>不能作为 的后代出现<a>。在（由链接创建）
Fix: Add "componentClass" attribute to render NavItem as <span>tag instead of <a>tag (You can use any other tag name here)
修复：添加“componentClass”属性以将 NavItem 呈现为<span>标签而不是<a>标签（您可以在此处使用任何其他标签名称）
My code was
我的代码是
<Nav pullRight>
<NavItem>
<Link to="/responses">Responses</Link>
</NavItem>
</nav>
After fix
修复后
<Nav pullRight>
<NavItem componentClass='span'>
<Link to="/responses">Responses</Link>
</NavItem>
</nav>
This also messes up styling, to fix it add following CSS
这也会弄乱样式，要修复它，请添加以下 CSS
.navbar-nav span[role=button] {
padding: 15px;
display: inline-block;
line-height: 20px;
}
回答by Quentin
What does that mean?
这意味着什么？
It means that:
这意味着：
<a href="http://example.com">
<span>
<a href="http://example.net">
...
</a>
</span>
</a>
and
和
<a href="http://example.com">
<a href="http://example.net">
...
</a>
</a>
and similar constructs are not allowed. They don't make sense anyway.
并且不允许类似的构造。反正它们没有意义。
How can you prevent it?
你怎么能预防呢？
This isn't something that happens without someone writing code that tries to do it.
如果没有人编写尝试这样做的代码，就不会发生这种情况。
You need to find that code and change it.
您需要找到该代码并进行更改。
Are nested links illegal in HTML, HTML5 or React.js?
HTML、HTML5 或 React.js 中的嵌套链接是否非法？
They are illegal in all versions of HTML. The first DTD for HTML was published as part of HTML 2. It says:
它们在所有版本的 HTML 中都是非法的。HTML 的第一个 DTD 作为 HTML 2 的一部分发布。它说：
<!ELEMENT A - - %A.content -(A)>
<!ELEMENT A - - %A.content -(A)>
The last part describes what content is allowed inside the element. The -(A)part of that means "Except for A elements".
最后一部分描述了元素内部允许的内容。这-(A)部分的意思是“A 元素除外”。
HTML 5 is just the 2014 update to HTML. HTML 5.1came out last year. HTML 5.2is under development.
HTML 5 只是 2014 年对 HTML 的更新。HTML 5.1于去年问世。HTML 5.2正在开发中。
React.js is a JavaScript library that generates an HTML DOM. The results are still (sort of) HTML.
React.js 是一个生成 HTML DOM 的 JavaScript 库。结果仍然是（某种）HTML。
回答by MarkS
You can use a function instead of 'a' tag:
您可以使用函数代替 '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;
Be careful to use a context. I'm using a context for routing only.
小心使用上下文。我仅使用上下文进行路由。
class SomeClass extends React.Component {
constructor(props,context) {
super(props,context);
this.redirect = this.redirect.bind(this);
}
