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