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

Question

我试图通过实现这个简单而优雅的解决方案来使我的 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 的一部分）或其他问题，我不知道该去哪里看。

谢谢你的帮助！

Answer 1

您正在尝试设置不支持xlinkHref的标签。应该在标签上使用a该属性。xlinkHref<use>

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

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

SVG 使用标签和 ReactJS

Answer 2

如果您设置tabindex属性，SVG 可以本机执行此操作。这与同名的HTML 属性的作用相同。