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

Question

我收到“警告：validateDOMNesting(...)：不能作为的后代出现。”尝试让带有 href 的标签出现在也有 href 的图像的一角时出错。我知道这是因为嵌套标签，但是当我尝试不同的“as”属性时，我无法获得任何其他工作方式。图片 link 无效，或者标签 link 无效。

当前代码：

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

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

感谢任何帮助

这是一个代码沙箱，展示了我正在努力实现的目标。请注意，使标签 link 与图像不同的唯一方法是使用两个 a 标签。

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

Answer 1

这是一个严重的辅助功能问题。不要在标签内放置任何 锚标记。

Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label. - MDN

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

Answer 2

这是我如何达到预期结果的。不确定这是否是正确的做法，是否可能存在 performance/accessibility 个问题。

单击图像的任何部分时，元素的节点名称决定结果。如果它是“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>

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

Semantic UI React href of label in corner of image with its own href causes errors

reactjs

semantic-ui

semantic-ui-react