エンドユーザーがレンダリングできるように React アプリケーションを WordPress ブロックに埋め込むにはどうすればよいですか?

Question

React アプリケーションを WordPress ブロックに埋め込み、このアプリケーションをエンドユーザーに提供したいと考えています。アプリを 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

1 つの方法は、WordPress 要素関数 https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/ で createRoot を使用することです。このようにして、DOM ノードに React コンポーネントを表示できます。ステップ：＃＃＃

1. render.php で DOM ノードを定義します:

   リーリー

2. 次の行を view.js に追加して、このノードでアプリケーションをレンダリングします。

   リーリー