在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?

Answer 1

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.