Question

我有一个可以整体点击的React组件，但也包含里面的按钮。

类似

<Link to={'/path1'}>
  ...
  <Link to={'path2'} />
  ...
</Link>

这是我想要的行为，但我收到了这个警告：

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

我应该认真对待这个以及解决方法是什么？

Answer 1

在HTML中禁止嵌套锚标记（这是<Link />转换为的内容）。即使你得到了理想的结果，也只是因为你的浏览器很聪明并且有自己的解决方法。但是，并非所有浏览器和平台都能保证这种行为。

我应该认真对待这个？

如上所述，我非常认真地说。

解决方法是什么？

以下不是一种解决方法，但我认为是＆＃34;正确的＆＃34;实施

我以编程方式实现包装元素的导航，并使用<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中导航的详细信息，请参阅以下链接之一：

对于React Router v1-v3：Link
对于React Router v4：Link

Answer 2

我认为最好的方法类似于 Chris 所说的，但不需要以编程方式进行导航。保持链接的默认行为并使用 css 使它们看起来嵌套。就浏览器而言，链接将是兄弟，而不是父/子。

所以基本上：

将周围 div 的位置设置为相对位置
“父”链接没有明确的位置，让它使用整个宽度/高度
将“子”链接的位置设置为绝对位置，这会将其从正常流中移除，并允许您将其放在 div 内的任何位置。事件不应发生冲突，因为链接不是嵌套的。

编辑：我知道这个答案是在几年后出现的，但我希望很多人都会遇到这个问题，因为它是一种常见的 UI 模式。

validateDOMNesting警告React

2 个答案: