dangerouslySetInnerHTML - How can I set it?

[bumbeishvili]

Thank you for creating this awesome project

I have one question ...

I want to use dynamic HTML content inside the element (Inside tooltip)

But when I try to use d3's html api like this

var myHTMLString = '<div>Test</div>'
d3node.html(myHTMLString)

It is not parsed as html

Is there any workaround to achieve the desired result ?

Sadly, I can't find a way to dangerouslySetInnerHTML to react component

assigning to d3node.node().innerHTML='<div>Test</div>' does not work either

[Olical]

Are you just setting this value on a node created by this library? That won't do anything until you call .toReact() on it and return that new result from a render method. You aren't changing a real DOM node, you're altering some JavaScript data structure which is translated to a React DOM node. React then works out what to update in the real DOM.

Just make sure you perform your change inside your React component and return the updated node from your render function.

[bumbeishvili]

Yes, and react parses innerHTML as a text and as I see there is no way to set dangerouslySetInnerHTML prop

I've also tried to generate react component from.string and append this.component to react faux dom node(like it was in one of unit tests), but it throws error (as I understand, it tries to invoke getElementsByTagName on react component)

[Olical]

Oh, so you want to insert HTML as a string and have React render that as actual DOM? I don't think there's any way to do this, maybe there's some kinda hacky workaround but I don't know off the top of my head I'm afraid.

I'd recommend avoiding this if you can and just build the real DOM. You can use appendChild and give it some React DOM generated by JSX if I recall correctly? Ah, hah, yep https://github.com/Olical/react-faux-dom/blob/a535a78d9a2f85440c6e5a2d20747581e84c7561/test/react.js#L43-L55

You can mix React DOM trees into your faux DOM tree / D3 stuff. Then when you call toReact it'll all be normalised to React nodes. Maybe do that instead of strings?

[bumbeishvili]

Yes, that is exactly what I want

I tried the way you mentioned, but it fails anyway (when react-faux-dom code tries to invoke getElementsByTagName in faux dom)

Let me write more details about this problem later

[Olical]

If it's just getElementsByTagName that's failing for you then it probably just means there needs to be a guard around https://github.com/Olical/react-faux-dom/blob/733707c73777bf36148f7619f3ccc97748f80af9/lib/_element.js#L199-L221 to prevent it from checking React nodes or to check them in a different way.

If you wanted to link the source code locally to try out a change like that then you could have your fix merged in :slightly_smiling_face:

I don't fully understand your problem, so if you manage to find a fix yourself you could definitely have that merged into the main project. I'd massively appreciate the effort too, if not I can try to find time to fix it myself once we understand the issue.

[Olical]

So is this still really an issue with this project? I think what you were trying to do didn't quite fit, so maybe you just need to change your approach? I think you mightv'e just got the render time / reconciliation time of react a little mixed up is all. Like what you can do and when.

[bumbeishvili]

I think we can close it

[Olical]

Okay, well I hope you find a solution. If you really need it maybe you can email me with more detail and I can try and help you out. But I don't think it's an issue with the library as such :slightly_smiling_face: good luck! Have a good day!