3

<use>React JSX で svg 要素を使用していますが、これは JSX で有効であると考えています。次のエラーは正しいですか?

小文字のコンポーネント名 (使用) は JSX でサポートされなくなりました:ファイルの解析中にhttp://fb.me/react-jsx-lower-caseを参照してください

<svg className="icon">
    <use xlink:href="#icon-call"></use>
</svg>

危険なSetInnerHTMLを使用すると修正されました。

<svg className="icon" dangerouslySetInnerHTML={{__html:'<use xlink:href="#icon-dnd-on"></use>'}}>
</svg>
4

1 に答える 1

7

TL;DR

今のところ使いづらくなっていると思いますdangerouslylSetInnerHTML。

説明

React は HTML/SVG 要素のサブセットのみをサポートしており、<use />まだサポートされていません。

v0.12 では、React は小文字のタグ名を HTML/SVG 要素のみに制限するように切り替えましたが、これはホワイトリストにない要素では失敗します。FB は、まだサポートしていない有効なタグについて問題を開くことをお勧めします。

を使用{React.createElement('use')}して React にタグを強制的にレンダリングさせることができますが、React は不明な DOM プロパティをサポートしていないため、属性<use />を設定することはできません (トピックの未解決の問題を参照してください)。前号では、標準外の属性を設定するために inを使用することを提案する人もいましたが、ユース ケースによっては、オプションよりもさらに不便な場合があります。xlink:hrefthis.getDOMNode().setAttributecomponentDidMountdangerouslySetInnerHTML

于 2014-12-05T23:02:17.200 に答える