如何在WordPress区块中嵌入React应用以实现终端用户侧渲染？

算力阿峰

2026-7-13

在WordPress区块中嵌入前端React应用的解决方案

要实现终端用户前端页面加载React应用，需结合动态区块的render.php占位容器与view.js的React组件挂载，具体步骤如下：

1. 配置动态区块占位容器

在render.php中输出带唯一标识的容器，供React应用挂载使用：

<div id="my-react-app-<?php echo esc_attr( $block['id'] ); ?>" 
     class="my-react-app-block" 
     data-block-id="<?php echo esc_attr( $block['id'] ); ?>">
</div>

确保区块的save回调返回null，保持动态区块的配置逻辑。

2. 编写view.js的React挂载逻辑

在view.js中导入React相关依赖，编写组件并挂载到对应容器：

// 导入WordPress提供的React工具
import { createRoot } from '@wordpress/element';
// 导入你的自定义React应用组件
import MyReactApp from './MyReactApp';

// 页面加载完成后挂载React应用
document.addEventListener('DOMContentLoaded', () => {
  const appContainers = document.querySelectorAll('.my-react-app-block');
  
  appContainers.forEach(container => {
    const blockId = container.dataset.blockId;
    const root = createRoot(container);
    root.render(<MyReactApp blockId={blockId} />);
  });
});

3. 确保view.js被前端加载

在区块的block.json中添加script字段，指定前端需加载的view.js文件：

{
  "apiVersion": 3,
  "name": "your-plugin/your-react-block",
  "title": "React应用区块",
  "category": "widgets",
  "icon": "admin-customizer",
  "description": "嵌入自定义React应用的动态区块",
  "supports": { "html": false },
  "editorScript": "file:./index.js",
  "script": "file:./view.js", // 前端加载的脚本
  "render": "file:./render.php"
}