如何在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

回答

相關問題