如何在svg标记上使用xlinkHref <a> using Typescript and React

Question

I am trying to make my SVG focusable, by implementing this simple and elegant solution。

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

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

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

我收到错误消息：

  

错误TS2339：'HTMLProps'类型中不存在属性'xlinkHref'

我不确定在哪里查看，如果它是一个Typescript问题，React缺少svg属性（虽然xlinkHref现在是React的一部分）或其他东西。

感谢您的帮助！

Answer 1

如果设置tabindex属性，SVG可以本机执行此操作。这与HTML attribute of the same name相同。

Answer 2

您正试图在xlinkHref标记上设置a，但不受支持。 xlinkHref属性应改为<use>标记。

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

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

SVG use tag and ReactJS