validateDOMNesting 警告反应

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

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

我应该如何认真对待这件事？

如上所述，我会很认真地说。

解决方法是什么？

以下不是解决方法，而是我认为是“正确”实现的方法。

我会以编程方式实现包装元素的导航并使用<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：链接
• 对于 React Router v4：链接