wix-incubator / react-templates

Light weight templates for react
https://wix.github.io/react-templates
MIT License
2.82k stars 207 forks source link

textPath Is Not Defined #223

Open epihel opened 7 years ago

epihel commented 7 years ago

Using react-templates 0.6.1 and react 15.5.4, the following code renders without errors:

` render() { return (

txt
    );

}; `

But this SVG in an .rt file: `

txt ` compiles to: ` React.createElement('text', {}, React.createElement(textPath, {}, 'txt')) ` and produces the error "Uncaught ReferenceError: textPath is not defined." It looks like there should be quotes around "textPath." According to React's documentation (https://facebook.github.io/react/blog/2016/04/07/react-v15.html), SVG elements are now fully supported. Is there a way to include textPath in rt files?
nippur72 commented 7 years ago

this could be quickly fixed by adding textPath to the list of SVG elements here.

As a workaround, until someone submits a PR, you could cheat by defining the variable textPath and let react render it as a native element:

let textPath = 'textPath';
...
<textPath></textPath>

or even in a scope:

<div rt-scope="'textPath' as textPath">
...
   <textPath></textPath>
...
</div>
epihel commented 7 years ago

Thank you for the rt-scope workaround. That worked. This then revealed a few more issues with the SVG attributes "xlink:href" and "clip-path," as well as the style attribute "clip-path", which react-templates currently passes through unchanged:

`

`

React gives the warnings: "Unknown DOM property xlink:href. Did you mean xlinkHref?" "Unknown DOM property clip-path. Did you mean clipPath?"