Comment intégrer une application React dans un bloc WordPress pour le rendu par l'utilisateur final ?

Question

Je souhaite intégrer mon application React dans un bloc WordPress et proposer cette application à l'utilisateur final. Je m'attends à ce que je puisse mettre mon application dans view.js, mais je n'arrive pas à afficher le contenu de view.js. Je peux bien exécuter React dans l'éditeur de blocs via Edit() dans edit.js, mais c'est parce que registerBlockType utilise {edit: Edit} dans l'objet de configuration de bloc. Mais il n'y a pas d'option {render: Render} correspondante. Le plus proche que je puisse faire pour intégrer mon application est de la sortir au format HTML dans render.php. Le fichier render.php s'affiche correctement (comme prévu pour une application dynamique avec un rappel de sauvegarde vide), mais cela ne suffit pas ;

Référence : https://developer.wordpress.org/block-editor/getting-started/create-block/block-anatomy/

Answer 1

Une solution consiste à utiliser createRoot à partir de la fonction d'élément wordpress, https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/. De cette façon, nous pouvons afficher les composants React dans les nœuds DOM. Étapes :

1. Définir les nœuds DOM dans render.php :

   <div id="replacement_id">要替换的内容</div>

2. Rendez l'application sur ce nœud en ajoutant ce qui suit à view.js :

   window.addEventListener("load", (event) => {
        const domElement = document.getElementById("replacement_id");
        const root = createRoot(domElement);
        root.render(<App />);
    });