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

Question

我正在尝试通过实现 this simple and elegant solution 使我的 SVG 可聚焦.

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

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

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

我收到错误消息:

error TS2339: Property 'xlinkHref' does not exist on type 'HTMLProps'

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

感谢您的帮助!

Answer 1

如果您设置 tabindex，SVG 可以 native 执行此操作属性。这与 HTML attribute of the same name 的工作原理相同.