reactjs - validateDOMNesting 警告 React

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 中禁止嵌套 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 中以编程方式导航的更多信息，请参阅以下链接之一:

• 对于 React Router v1-v3:Link
• 对于 React Router v4:Link