React component inside dangerouslySetInnerHTML

Question

In my application, I need to get an HTML string.
(From the server or from the user input, maybe something processed from markdown, in any case, it seems I really need to use setDangerousHtml.)

But I also need some react components inside that part.
For example, I would transform some links to Link from react-router; or I have something inside the HTML like <myWidget:12345> to a react component <MyWidget id="12345" text=this.props.text >.

What is the react-way for doing this?

Why do you need to get what seems to be a view string from the server? Ideally the server should only give you data which you then fit into your client-side components to render the view. — Matthew Herbst
– Matthew Herbst, Commented Oct 12, 2016 at 0:57
For example, I would like to write an app where the user can edit articles using markdown, so it is a string in markdown format. But I also need some customized tag in the string, that I'd love to render to special react component in my app. — user715353
– user715353, Commented Oct 12, 2016 at 5:09
Right, so, the only thing your server should be giving you is 1) the initial state of the markdown form, and 2) an acknowledgement of saving any changes made to the form. This can easily be done via JSON responses for example. There is no reason your server should be sending you back HTML/React strings when it's not the initial render. If you have parts of the markdown that should be rendered via their own component the front-end should handle that parsing. — Matthew Herbst
– Matthew Herbst, Commented Oct 12, 2016 at 7:35
The server sends the article in markdown, with some special tags (or in the other situation, the user edits it and wants a preview). Now reactjs needs to render this article on screen. — user715353
– user715353, Commented Oct 13, 2016 at 0:12
@user715353 a little too late but I answered something similar here too. stackoverflow.com/a/44688007/1204312. Worth the shot. — shriek
– shriek, Commented Jun 22, 2017 at 0:01

Ateev Chopra · Accepted Answer · 2016-10-12 05:36:27Z

0

One of the way to approach this problem is using RenderToString function. Convert the component that you want to insert into a string like this:

import React, { Component } from 'react';
import { renderToString } from 'react-dom/server';
import MyComponent from 'MyComponent.jsx';

var MyComponentString = renderToString(MyComponent);

Now concat this string into the string that's coming from the API wherever you want. Use basic string manipulation functions to achieve that.

Then, use setDangerousHtml to achieve the final new DOM. Although this might not be the recommended way for doing this, because RenderToString isn't supposed to be used in browser, it'll work.

answered Oct 12, 2016 at 5:36

Ateev Chopra

1,0163 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user715353 Over a year ago

I think this does not feel right, but is lovely..:) I will give it a try at least to see how it works. Thanks!

user715353 Over a year ago

I tried this and some other hacks, and they all end up with the same error: turns out I need to passdown the whole context (in my case, MuiProvider, store provider, router, etc.) to the components inside the HTML. Is there an easy way to get around this?

Collectives™ on Stack Overflow

React component inside dangerouslySetInnerHTML

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related