2017-06-19 4 views
1

this simple and elegant solutionを実装してSVGをフォーカス可能にしようとしています。xlinkHrefをsvgタグで使用する方法<a> TypescriptとReactを使用して

エラーTS2339:プロパティ 'xlinkHref' タイプに存在しません「HTMLProps

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

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

私はエラーメッセージを取得しています:私は活字体を使用して反応してい

は、ここに私のコードですそれは活字体の問題だが '

私は、ここで見て確認していないか、他の何か(xlinkHrefは今リアクトの一部ではあるが)、SVG属性が欠落して反応します。

ありがとうございました!

+0

これはすばらしい@RobertLongsonです!私はそれを考えなかったでしょう、そして、ボーナスとして私は今、私のsvgをナビゲートするためにTABを使うことができます。どうもありがとう。あなたは短い答えを書くことができますので、私は答えとしてそれを検証できますか? –

答えて

0

aタグにxlinkHrefを設定しようとしていますが、これはサポートされていません。代わりに<use>タグでxlinkHrefプロパティを使用する必要があります。

あなたはここでは使用できDEFS上に読むことができます:あなたはtabindex属性を設定した場合

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

SVG use tag and ReactJS

+0

私はこれらの記事を見ましたが、私の ''をクリックすることを例と同じ方法(ハイパーリンク参照)にするには ''を使う方法を理解していません。簡単な例を教えてください。 –

関連する問題