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