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

我想通过实施this simple and elegant solution来实现我的SVG的可聚焦性。如何在svg标签上使用xlinkHref <a>使用Typescript和React

我用的打字稿及反应，这里是我的代码：

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

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

我收到错误消息：

错误TS2339：房产 'xlinkHref' 上类型不存在“HTMLProps '

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

感谢您的帮助！

来源

2017-06-19 Greg Forel

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

SVG可以做到这一点本身。这与HTML attribute of the same name的作用相同。

来源

2017-06-19 12:19:40

您试图在a标记上设置xlinkHref，该标记不受支持。改为使用xlinkHref属性代替<use>标记。

您可以在这里允许的DEFS读了起来：如果设置了tabindex属性

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

SVG use tag and ReactJS

来源

2017-06-19 09:21:10

我看到这些帖子，但我不明白如何使用''来使我的''可点击与示例相同的方式（请参阅超链接）。你能告诉我一个简短的例子吗？ –

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

回答

相关问题