Bagaimana untuk membenamkan aplikasi React ke dalam blok WordPress untuk dipaparkan oleh pengguna akhir?
P粉790819727
2023-08-17 21:15:10
<p>Saya mahu membenamkan aplikasi React saya dalam blok WordPress dan menyampaikan aplikasi ini kepada pengguna akhir. Jangkaan saya ialah saya boleh meletakkan apl saya dalam view.js, tetapi saya tidak boleh mendapatkan kandungan view.js untuk dipaparkan. Saya boleh menjalankan React fine dalam editor blok melalui Edit() dalam edit.js, tetapi ini kerana registerBlockType menggunakan {edit: Edit} dalam objek konfigurasi blok. Tetapi tiada pilihan {render: Render} yang sepadan. Yang paling dekat saya boleh dapatkan untuk membenamkan aplikasi saya ialah dengan mengeluarkannya kepada HTML dalam render.php. Fail render.php berfungsi dengan baik (seperti yang dijangkakan untuk aplikasi dinamik dengan panggilan balik simpan kosong), tetapi ini tidak mencukupi; </p>
<p>Rujukan: https://developer.wordpress.org/block-editor/getting-started/create-block/block-anatomy/</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Salah satu cara ialah menggunakan createRoot daripada fungsi elemen wordpress, https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/. Dengan cara ini kita boleh memaparkan komponen React dalam nod DOM. Langkah-langkah:
Tentukan nod DOM dalam render.php:
Render aplikasi pada nod ini dengan menambahkan yang berikut untuk view.js:
window.addEventListener("load", (event) => { const domElement = document.getElementById("replacement_id"); const root = createRoot(domElement); root.render(<App />); });