Render reactdom sur les ids dynamiques (React JS)

Question

Nous avons un CMS basé sur PHP, qui utilise des modules personnalisés.

Chaque module est rendu sous forme de document HTML et peut être inclus (accroché) sur chaque page et possède son propre ID dynamique et unique dans le code HTML.

Maintenant je voudrais créer un système de template JavaScript pour ce module où l'appliaction React pourrait être rendue sur chaque module.

Par exemple, j'ai créé mon bundle de réaction. Et j'ai aussi ma seule page avec le module qui génère les modules avec le module html où la réaction devrait être rendue. Et je voudrais que mon réagir ensemble pour rendre ce id au lieu de:

ReactDOM.render(<App />, document.getElementById('root')); 

L'ID mod-123416-nom est automatiquement créé, de sorte que je veux avec un code par exemple RenderReactOn ("mod-123516-nom ") côté client pour rendre un bundle de réaction sur chaque module avec cet identifiant.

Je peux rendre le même code sur les modules réagissent n différents sur le côté client:

RenderReactOn("mod-123516-name"); 
RenderReactOn("mod-252141-name"); 
RenderReactOn("mod-453467-name"); 

Est-ce possible de réagir, ou quelles sont les meilleures pratiques dans de tels cas. Peut-être que je devrais prendre Knockout.js au lieu de réagir?

Merci à des conseils Tony

Answer 1

Ce n'est pas un problème du tout, je le ferais de cette façon:

Bundle vos composants (REACT Apps) dans un seul fichier:

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; 

Dans votre rendu 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>