Open queckezz opened 8 years ago
Hmmm...I think actually just setting innerHTML
as a an attribute on an element should work at the moment (it's implemented in virtex-dom. I haven't really tested it much, so its possible you will run into issues with the diffing process, but it should at least kind of work.
So you'd just do:
const req = `<use xlink:href='${glyph}'></use>`
<svg
width={width}
height={height ? height : width}
innerHTML={req}
>
</svg>
The core doesn't have any special knowledge of this raw dom that's been inserted. I can't think of anything in particular that would go wrong as a result of that, but it's just not a case i've thought hard about yet or tested much.
Want to try it out and let me know?
EDIT: That is annoying though that it blows up the jsx compiler. I had just gotten a PR on virtex-dom to properly support those attributes. I wonder if babel has any plans to support that in the future.
Nice! innerHTML
works just fine, thanks. Haven't tested with virtex-string
yet though. I'll report back when I tried.
The core doesn't have any special knowledge of this raw dom that's been inserted. I can't think of anything in particular that would go wrong as a result of that, but it's just not a case i've thought hard about yet or tested much.
Ah right, I'm not sure if this has an impact, but atm I'm just returning false
from shouldUpdate
to opt-out of the rendering cycle after initial render:
const shouldUpdate = () => false
const render = (...)
export {
shouldUpdate,
render
}
EDIT: That is annoying though that it blows up the jsx compiler. I had just gotten a PR on virtex-dom to properly support those attributes. I wonder if babel has any plans to support that in the future.
React <0.14 implemented xlinkHref
to workaround that. I haven't dug into this much though.
Hey @ashaffer!
I implemented React's dangerouslySetInnerHTML function for svg contents since these awkward namespaces (
xlink:href
) explode the JSX compiler:Right now the implementation is based on dom and cannot be used for say
virtex-string
.Can you give me some directions of where to implement something like this, but not based on raw dom operations? Is this something that needs to be implemented in core? I'm happy to open a PR.