如何在危险的SetInnerHTML 内容中呈现反应组件？

Question

HTML content getting from server and rendering on UI using dangerouslySetInnerHTML inside a particular element.

My question is to render React component inside the dangerouslySetInnerHTML content using some identifiers like id .

Answer 1

While possible, this is sort of the wrong approach. dangerouslySetInnerHtml expects a string, so you would have to render the React component to a string and insert it into the HTML string before setting it... or use a hook to manipulate the DOM after it's been rendered, but that's against React best practices; you should let React manage the DOM and its changes.

Since you mentioned getting HTML back from the server, I would suggest making a change there. Instead of returning HTML from the server, return JSON data. On the client side, you can take the JSON and populate the React components you need to render, without using dangerouslySetInnerHtml at all.

Returning HTML in response to AJAX calls was common in the early days of AJAX, but it is now standard practice to return "raw" data for exactly these reasons. If some of your HTML is defined client side, and some server side, it will be very challenging to manage DOM scripting & interactivity on the client.

Answer 2

dangerouslySetInnerHtml cannot render react components, because it does not accepts components. It accepts only a html string.