如何將React應用程式嵌入WordPress區塊中，以供最終用戶渲染？

Question

我想在WordPress區塊中嵌入我的React應用程序，並為最終用戶提供此應用程式。我的期望是我可以把我的應用程式放在view.js中，但是我無法使view.js的內容渲染出來。我可以透過edit.js中的Edit()在區塊編輯器中正常執行React，但這是因為registerBlockType在區塊配置物件中使用了{edit: Edit}。但是沒有對應的{render: Render}選項。我能夠最接近嵌入我的應用程式的方法是在render.php中將其輸出為HTML。 render.php檔案正常渲染（對於一個保存回調為空的動態應用程式來說是預期的），但這是不夠的；我需要使用React。

參考：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 />);
    });