Wie bette ich eine React-Anwendung in einen WordPress-Block ein, damit sie vom Endbenutzer gerendert werden kann?
P粉790819727
P粉790819727 2023-08-17 21:15:10
0
1
375

Ich möchte meine React-Anwendung in einen WordPress-Block einbetten und diese Anwendung dem Endbenutzer bereitstellen. Ich erwarte, dass ich meine App in view.js einfügen kann, den Inhalt von view.js jedoch nicht rendern kann. Ich kann React problemlos im Blockeditor über Edit() in edit.js ausführen, aber das liegt daran, dass registerBlockType {edit: Edit} im Blockkonfigurationsobjekt verwendet. Es gibt jedoch keine entsprechende Option {render: Render}. Der Einbettung meiner Anwendung komme ich am nächsten, indem ich sie in render.php als HTML ausgibt. Die render.php-Datei wird gut gerendert (wie für eine dynamische Anwendung mit einem leeren Save-Callback erwartet), aber das reicht nicht aus;

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

P粉790819727
P粉790819727

Antworte allen (1)
P粉321584263

一种方法是使用wordpress元素函数中的createRoot,https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/。这样我们可以在DOM节点中显示React组件。步骤:

  1. 在render.php中定义DOM节点:

    要替换的内容
  2. 通过将以下内容添加到view.js中,在此节点上渲染应用程序:

    window.addEventListener("load", (event) => { const domElement = document.getElementById("replacement_id"); const root = createRoot(domElement); root.render(); });
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!