如何将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 />);
    });