如何使用 Typescript 和 React 在 svg 标签 <a> 上使用 xlinkHref答案

【问题标题】：How to use xlinkHref on svg tag <a> using Typescript and React如何使用 Typescript 和 React 在 svg 标签 <a> 上使用 xlinkHref
【发布时间】：2017-06-19 09:18:01
【问题描述】：

我正在尝试通过实现this simple and elegant solution 使我的 SVG 具有焦点。

我正在使用 Typescript 和 React，这是我的代码：

return (
  <g {...propsWbsComponent} >
    <a xlinkHref={"#"}>
      <rect  {...propsWbsComponentBox} />
    </a>

    <text {...propsWbsId} >
      {props.wbsComponentId}
    </text>
  </g>
}

我收到错误消息：

错误 TS2339：“HTMLProps”类型上不存在属性“xlinkHref”

如果是 Typescript 问题、React 缺少 svg 属性（尽管 xlinkHref 现在是 React 的一部分）或其他问题，我不知道该去哪里找。

感谢您的帮助！

【问题讨论】：

这太棒了@RobertLongson！我不会想到这一点，作为奖励，我现在可以使用 TAB 来导航我的 svg。非常感谢。你能写一个简短的答案，这样我就可以验证它是答案吗？

标签： reactjs typescript svg xlink

【解决方案1】：

如果你设置了tabindex 属性，SVG 可以原生地做到这一点。这与HTML attribute of the same name 的工作方式相同。

【讨论】：

【解决方案2】：

您尝试在 a 标记上设置 xlinkHref，这是不受支持的。 xlinkHref 属性应该用在 <use> 标记上。

您可以在此处阅读允许的定义：

https://github.com/Microsoft/TypeScript/issues/14893

SVG use tag and ReactJS

【讨论】：

我看到了这些帖子，但我不明白如何使用<use> 使我的<rect> 像示例一样可点击（参见超链接）。你能给我看一个简短的例子吗？