如何将React应用程序嵌入WordPress块中,以供最终用户渲染?
P粉790819727
P粉790819727 2023-08-17 21:15:10
0
1
453
<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>
P粉790819727
P粉790819727

全部回复(1)
P粉321584263

一种方法是使用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 />);
     });
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板