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’existe pas d’option {render:Render} correspondante. le plus proche que je puisse obtenir

P粉321584263 · Answer

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 :

Définir les nœuds DOM dans render.php :
```
要替换的内容
```

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();
 });