我有一个整体可点击的 React 组件,但内部也包含按钮。
所以类似
<Link to={'/path1'}>
...
<Link to={'path2'} />
...
</Link>
这是我想要的行为,但我收到此警告:
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See SearchResult > Link > a > ... > Link > a.
我应该如何认真地对待这个问题以及解决方法是什么?
最佳答案
HTML 中禁止嵌套 anchor 标记(<Link />
转译为的内容)。即使您得到了想要的结果,那也只是因为您的浏览器很聪明并且有自己的解决方法。但是,无法保证在所有浏览器和平台上都能实现这种行为。
How seriously should I take this?
根据上述内容,我会非常认真地说。
What would be the workaround?
以下不是解决方法,但我认为是“正确”的实现。
我将以编程方式实现包装元素的导航并使用 <Link />
对于按钮。所以类似:
navigate = () => {
//push "path1" to history
}
render() {
return(
<div onClick={this.navigate}>
<Link to="path2">Some button</Link>
<Link to="path3">Some button</Link>
</div>
);
}
有关在 React Router 中以编程方式导航的更多信息,请参阅以下链接之一:
关于reactjs - validateDOMNesting 警告 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47282998/