Rendering external HTML/React components dynamically in React

Question

Is it possible to take HTML/JSX content from an external source and render it in dynamically in React? In our case we want to take content from the Wordpress API and render it on both the client and the server (we're using NextJS)

So, the Wordpress API returns a JSON response which includes a content property which is a string of HTML/JSX. the content would look something like this.

{
    content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>This is an image gallery</span></div>"
}

So, as you can see it would be a mix of HTML and React components/JSX, represented as a string

I would use Axios to make a call to get the content (on both server and client using NextJS's getInitialProps() method), then I need to render it, but i'm new to react and I can see a couple of problems.

1) In React, JSX is compiled at build time, not run time, I can't see how to get round this (It would have been easy in Angular using $compile service for example).

2) As we don't know what components the content from Wordpress is going to use, we'd have to import every single one of them at the top of the page, the content may include a component or it may include a component, who knows?.

Right now, I'm thinking this isn't possible, which would mean we'd have to reconsider using React, but I'm really hoping somebody has an answer.

Any help would really be appreciated.

Answer 1

Interesting problem!

You should try react-jsx-parser. I think it solves your problems. Not sure how it works with Next JS - I have no experience with Next JS.

Check out this sandbox:

---

You are right about all the components getting bundled. There is a workaround for that. :)

Check out this sandbox:

I've created a dynamicComponent that expects an import promise and returns a component.

I changed the way A, B and C components are imported in index.js. This way each dynamically imported component gets a separate bundle and is only requested when needed.

This should solve your second problem.

Answer 2

You can refer to the below link

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

For the React Components part you can render an Static HTML Markup string using

https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

But be sure that the html you get is from an authentic source and will not contain any malicious scripts

Answer 3

You can Render external HTML/React components dynamically in React like this, simply in these quotation , content: `<div>${<Slider imageCount="5" galleryID="1"></Slider>}<span>This is an image gallery</span></div>

ends with these ` sign.