Render reactdom on dynamic ids (React JS) - reactjs

Question

we have a CMS build on PHP, which uses custom modules.
Each module is rendered as HTML document and can be included(hooked) on every single page and has its own, dynamic aund unique ID in the html.
Now I would like to create a JavaScript Template System for this modules where the React appliaction could be rendered on each module.
For example I have created my react bundle. And I also have my single page with module which generates the modules with module html where react should be rendered. And I would like my react bundle to render on this id instead of:
ReactDOM.render(<App />, document.getElementById('root'));
The ID mod-123416-name is automatically created, so that I want with some code for example RenderReactOn("mod-123516-name") on the client side to render one react bundle on each module with this id.
So I can render the same react code on n different modules on the client side:
RenderReactOn("mod-123516-name");
RenderReactOn("mod-252141-name");
RenderReactOn("mod-453467-name");
Is this possible with react, or what are the best practices in such cases. Maybe I should take Knockout.js instead of react?
Thanks in advice
Tony

Answer 1

This is not a problem at all, I'd do it this way:
Bundle your Components (React Apps) in a single File:
import React from 'react';
import { render } from 'ReactDOM'
import ReactAppOne from 'ReactAppOne'
import ReactAppTwo from 'ReactAppTwo'
const Apps = {
ReactAppOne,
ReactAppTwo,
}
function renderAppIn(elementId, appId) {
const APP = Apps[appId]
if (!APP) return;
render(<APP />, document.getElementById(id))
}
// simply assign that function to the window
window.renderAppIn = renderAppIn;
In your rendered html:
<div id="some-app-123"></div>
<div id="some-app-xyz"></div>
<script src="/js/bundle.js"></script>
<!-- Render your Render Stamements -->
<script>
renderAppIn('some-app-123', 'ReactAppOne')
renderAppIn('some-app-123', 'ReactAppTwo')
// render the same app in another div
renderAppIn('some-other-div', 'ReactAppTwo')
</script>