Wie bette ich eine React-Anwendung in einen WordPress-Block ein, damit sie vom Endbenutzer gerendert werden kann?

Question

Ich möchte meine React-Anwendung in einen WordPress-Block einbetten und diese Anwendung dem Endbenutzer bereitstellen. Ich erwarte, dass ich meine App in view.js einfügen kann, den Inhalt von view.js jedoch nicht rendern kann. Ich kann React problemlos im Blockeditor über Edit() in edit.js ausführen, aber das liegt daran, dass registerBlockType {edit: Edit} im Blockkonfigurationsobjekt verwendet. Es gibt jedoch keine entsprechende Option {render: Render}. Der Einbettung meiner Anwendung komme ich am nächsten, indem ich sie in render.php als HTML ausgibt. Die render.php-Datei wird gut gerendert (wie für eine dynamische Anwendung mit einem leeren Save-Callback erwartet), aber das reicht nicht aus;

Referenz: https://developer.wordpress.org/block-editor/getting-started/create-block/block-anatomy/

Answer 1

一种方法是使用wordpress元素函数中的createRoot，https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/。这样我们可以在DOM节点中显示React组件。步骤：

1. 在render.php中定义DOM节点：

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

2. 通过将以下内容添加到view.js中，在此节点上渲染应用程序：

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