Menu
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.
667
Fetching the HTML from an external source One simple way to do dynamically fetch a choose a specific file would be to let your backend (e.g php) read the file from a local folder, parse the text, and send it back through an AJAX request.
This should work: var component = Components[itemData['itemClass']]); return React. createElement(component, { data: itemData, key: itemData['id'] }); You can't use JSX syntax like this <component .../> because when it gets transpiled component won't refer to anything.
To render the components based on the component key in the JSON config, we first need to create an object that maps the components with the component key. As you can see, I have mapped the component key with the corresponding Reactstrap component. At the top, we will import all the required components.
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.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
