svg - Lower case component names (use) are no longer supported in JSX: <use> -


i using svg element in react jsx, thinking <use> valid in jsx. following error correct ?

lower case component names (use) no longer supported in jsx: see http://fb.me/react-jsx-lower-case while parsing file

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

using dangerouslysetinnerhtml fixed it.

<svg classname="icon" dangerouslysetinnerhtml={{__html:'<use xlink:href="#icon-dnd-on"></use>'}}> </svg> 

tl;dr

i think you're stuck using dangerouslylsetinnerhtml now.

explanation

react supports subset of html/svg elements , <use /> isn't supported yet.

with v0.12 react switched restricting lower-case tag names html/svg elements, you've encountered fails elements aren't on whitelist. fb recommends opening issue valid tags don't yet support.

you can use {react.createelement('use')} force react render <use /> tag still won't allow set xlink:href attribute since react doesn't support unknown dom properties (see open issue on topic). in previous issue suggest using this.getdomnode().setattribute in componentdidmount set non-standard attributes, depending on use case may more inconvenient dangerouslysetinnerhtml option.


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -