Bagaimana untuk membenamkan aplikasi React ke dalam blok WordPress untuk dipaparkan oleh pengguna akhir?

Question

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;

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

Answer 1

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:

1. Tentukan nod DOM dalam render.php:

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

2. 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 />);
    });