validateDOMNesting 警告反应 [英] validateDOMNesting warning React

问题描述

我有一个 React 组件，它整体上是可点击的，但内部也包含按钮.

所以就像

...<链接到={'path2'}/>...</链接>

这是我想要的行为，但我收到此警告:

警告:validateDOMNesting(...):不能作为 <a> 的后代出现.见搜索结果 >链接 >＞... >链接 >一种.

我应该如何认真对待这个问题，有什么解决方法?

解决方案

嵌套锚标记(这是 转译的内容)在 HTML 中是被禁止的.即使你得到了想要的结果，也只是因为你的浏览器很聪明并且有自己的变通方法.但是，不能保证在所有浏览器和平台上都能实现这种行为.

<块引用>

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

根据上面的内容，我很认真地说.

<块引用>

解决方法是什么?

以下不是解决方法，而是我认为正确"的实现.

我会以编程方式实现包装元素的导航，并为按钮使用 .所以像:

navigate = () =>{//将path1"推入历史}使成为() {返回(<div onClick={this.navigate}><Link to="path2">一些按钮</Link><Link to="path3">一些按钮</Link>

);}

有关在 React Router 中以编程方式导航的更多信息，请参阅以下链接之一:

• 对于 React Router v1-v3:链接
• 对于 React Router v4:链接

I have a React component that is clickable as a whole, but also contains buttons inside.

So something like

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

This is the behaviour I want, but I get this warning:

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

How seriously should I take this and what would be the workaround?

解决方案

Nesting anchor tags (which is what <Link /> transpiles to) is forbidden in HTML. Even if you get the desired result, it is only because your browser is clever and has its own work-arounds. However, that behavior cannot be guaranteed across all browsers and platforms.

How seriously should I take this?

As per the above, I'd say quite seriously.

What would be the workaround?

The following isn't a workaround, but what I consider to be the "proper" implementation.

I'd programatically implement the navigation for the wrapping element and use the <Link /> for the buttons. So something like:

navigate = () => {
  //push "path1" to history
}

render() {
  return(
    <div onClick={this.navigate}>
      <Link to="path2">Some button</Link>
      <Link to="path3">Some button</Link>
    </div>
  );
}

For more info about programatically navigating in React Router see one of the links below:

• For React Router v1-v3: Link
• For React Router v4: Link

这篇关于validateDOMNesting 警告反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！