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
Post a Comment