语义UI将图像角落中标签的href与自己的href反应会导致错误

Question

我正在接收"警告：validateDOMNesting(…(：不能作为的后代出现"尝试将带有href的标签显示在同样具有href的图像的角落时出错。我知道这是因为嵌套标签，但当我尝试不同的"；作为"；属性。图像链接不工作，或者标签链接不工作。

当前代码：

<Image
href="some-link"
as="a"
fluid
src="https://somesource.com"
label={{
corner: "right",
icon: "plus",
as: "a",
href: "#",
onClick: () => {
dosomestuff();
},
}}
/>

我想点击图片链接到图片href，点击标签运行代码中定义的js函数。

感谢的任何帮助

下面是一个代码沙盒，展示了我正在努力实现的目标。请注意，让标签以不同的方式链接到图像的唯一方法是使用两个a标签。

https://codesandbox.io/s/funny-wildflower-cnvzp?file=/example.js

Answer 1

这是一个严重的可访问性问题。不要在标签内放置任何锚点标签。

不要在标签内放置诸如锚点或按钮之类的交互式元素。这样做会使人们很难激活与标签相关联的表单输入。-MDN-

相反，将锚点标记放在不同的标记中，如<p>。

Answer 2

以下是我如何获得所需结果的。不确定这样做是否正确，以及是否存在性能/可访问性问题。

单击图像的任何部分时，元素的nodeName将决定结果。如果是"；IMG"；然后点击图像。否则；a"；或单击了图标。

<Image
fluid
src="https://somesource.com"
onClick={(el) => {
if (el.target.nodeName === "IMG") {
history.push(`product/${product.slug}`);
} else {
addProduct(product._id, product.title);
}
}}
label={{
corner: "right",
icon: "plus",
as: "a",
}}
/>

Answer 3

我把它分成了3个组件，它对我很有用。

<Card key={file.id}
style={{border: '3px solid red', padding: 2}}>
<Image
///////////////////////////
// label={{
//     as: 'a',
//     corner: 'right',
//     icon: 'delete',
//     color: 'red',
// }}
//////////////////////////
src={'http://localhost:8000/api/storage/downloadFile?fileName=' + file.fileName}
wrapped
alt={file.id}
onClick={this.handleOnClickOnImage}
ui={false}
/>
<Label
onClick={this.handleOnClickCornerDeleteImage}
value={file.id}
as='a'
corner='right'
icon='delete'>
<Icon value={file.id} name='delete'/>
</Label>
</Card>