如何將React應用程式嵌入WordPress區塊中，以供最終用戶渲染？
P粉790819727
2023-08-17 21:15:10
<p>我想在WordPress區塊中嵌入我的React應用程序，並為最終用戶提供此應用程式。我的期望是我可以把我的應用程式放在view.js中，但是我無法使view.js的內容渲染出來。我可以透過edit.js中的Edit()在區塊編輯器中正常執行React，但這是因為registerBlockType在區塊配置物件中使用了{edit: Edit}。但是沒有對應的{render: Render}選項。我能夠最接近嵌入我的應用程式的方法是在render.php中將其輸出為HTML。 render.php檔案正常渲染（對於一個保存回調為空的動態應用程式來說是預期的），但這是不夠的；我需要使用React。 </p>
<p>參考：https://developer.wordpress.org/block-editor/getting-started/create-block/block-anatomy/</p>
一種方法是使用wordpress元素函數中的createRoot，https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/。這樣我們可以在DOM節點中顯示React元件。步驟：
在render.php中定義DOM節點：
透過將下列內容新增至view.js中，在此節點上渲染應用程式：
window.addEventListener("load", (event) => { const domElement = document.getElementById("replacement_id"); const root = createRoot(domElement); root.render(<App />); });