有什么方法可以抑制 React 中的单个 validateDOMNesting 警告？

Question

就我而言，我有这样的事情：

<div className="projects">
  {getProjectList().map(p => (
    <Link key={p.id} 
          className='project' 
          to={`/project/${p.id}`} 
          style={{border: '2px solid red'}}
    >
        #{p.id} - {p.name}
        <div className="helpers">
          <Button
            icon="trash"
            size="mini"
            color="red"
            onClick={e => {
              e.preventDefault();
              e.stopPropagation();
              setDeleting(p);
            }}
          />
          <Button
            size="mini"
            color="red"
            as={Link}
            to={`/edit/${p.id}`}
          >Edit</Button>
        </div>
    </Link>
  ))}
</div>

视觉上表示如下：

我更愿意保持这样，因为它按预期工作。

为什么我想要这样的附加解释：我想向用户提供用鼠标右键单击两个链接并选择“在新选项卡中打开链接”的能力。导航到项目的详细信息，并导航到编辑表单以更改项目的属性（这是两个不同的页面）。

但在这种情况下，我有两个相互嵌入的时间标签，并且 React 生成：

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

有什么方法可以抑制吗？

Answer 1

只需/* eslint-disable */在文件中添加您想要抑制的警告，如官方 github 存储库中所述如何隐藏不需要的警告。

请记住，这不是最佳实践。