최종 사용자가 렌더링할 수 있도록 WordPress 블록에 React 애플리케이션을 포함하는 방법은 무엇입니까?

Question

내 React 애플리케이션을 WordPress 블록에 포함하고 이 애플리케이션을 최종 사용자에게 제공하고 싶습니다. 내 앱을 view.js에 넣을 수는 있지만 렌더링할 view.js의 콘텐츠를 가져올 수는 없습니다. edit.js의 Edit()를 통해 블록 에디터에서 React를 잘 실행할 수 있는데, 이는 RegisterBlockType이 블록 구성 객체에서 {edit: Edit}를 사용하기 때문입니다. 하지만 해당하는 {render:Render} 옵션이 없습니다. 내 애플리케이션을 임베딩할 수 있는 가장 가까운 방법은 이를 render.php에서 HTML로 출력하는 것입니다. render.php 파일은 잘 렌더링되지만(빈 저장 콜백이 있는 동적 애플리케이션의 경우 예상대로), 이것만으로는 충분하지 않습니다.

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

Answer 1

한 가지 방법은 wordpress 요소 함수(https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/)에서 createRoot를 사용하는 것입니다. 이런 방식으로 DOM 노드에 React 구성 요소를 표시할 수 있습니다. 단계:

1. render.php에서 DOM 노드 정의:

   으아악

2. view.js에 다음을 추가하여 이 노드에서 애플리케이션을 렌더링합니다.

   으아악