问题
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.
回答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.
回答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
回答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.
来源：https://stackoverflow.com/questions/51482929/rendering-external-html-react-components-dynamically-in-react