There is non-SPA scenario with sanitized yet random HTML string as an input:
<p>...</p>
<p>...</p>
<gallery image-ids=""/>
<player video-id="..."/>
<p>...</p>
The string originates from WYSIWYG editor and contains nested regular HTML tags and a limited number of custom elements (components) that should be rendered to widgets.
Currently HTML snippets like this one are supposed to be rendered on server side (Express) separately but will eventually be rendered on client side too as a part of isomorphic application.
I intend use React (or React-like framework) to implement components because it presumably suits the case - it is isomorphic and renders partials well.
The problem is that substrings like
<gallery image-ids="[1, 3]"/>
should become
<Gallery imageIds={[1, 3]}/>
JSX/TSX component at some point, and I'm not sure what is the right way to do this, but I would expect it to be a common task.
How can this case be solved in React?