Laravel搭配React时如何在动态生成的视图中触发组件渲染？

实现思路 #

通过符合HTML规范的自定义属性标记React挂载节点，全局统一扫描节点并自动匹配渲染对应组件，无需为每个组件单独编写固定的渲染入口，完美适配PHP动态生成视图、多组件并存的场景，也兼容逐步替换jQuery的迁移需求。

具体实现步骤 #

1. 全局注册组件映射与渲染逻辑 #

在React入口文件（通常为resources/js/app.js）中引入所有需要用到的组件，建立组件标识与实际组件的映射关系，同时编写自动扫描渲染的全局函数：

// 引入依赖
import React from 'react';
import ReactDOM from 'react-dom';
// 引入所有需要对外暴露的React组件
import Calculator from './components/Calculator';
import TodoList from './components/TodoList';
import UserCard from './components/UserCard';

// 建立组件标识与实际组件的映射表
const ReactComponentMap = {
  Calculator,
  TodoList,
  UserCard
  // 后续新增需要在视图直接调用的组件，在这里补充注册即可
}

// 全局挂载初始化函数，扫描所有带标记的DOM节点并渲染对应组件
window.initReactComponents = function() {
  // 遍历所有带data-react-component属性的节点
  document.querySelectorAll('[data-react-component]').forEach(el => {
    const componentName = el.dataset.reactComponent;
    const TargetComponent = ReactComponentMap[componentName];
    // 未注册的组件直接跳过
    if (!TargetComponent) return;

    // 支持从视图传入自定义props，可接收PHP输出的动态参数
    const props = el.dataset.props ? JSON.parse(el.dataset.props) : {};
    // 渲染组件
    ReactDOM.render(<TargetComponent {...props} />, el);
  })
}

// 页面加载完成后自动执行一次初始化
document.addEventListener('DOMContentLoaded', initReactComponents);

如果使用React 18，将渲染逻辑替换为createRoot写法即可：

// 替换上面的ReactDOM.render部分
import { createRoot } from 'react-dom/client';
const root = createRoot(el);
root.render(<TargetComponent {...props} />);

2. 视图侧直接调用组件 #

在Laravel的Blade模板中，只要给挂载节点添加对应自定义属性即可，不需要额外修改JS文件：

<!-- 直接渲染Calculator组件 -->
<div data-react-component="Calculator"></div>

<!-- 渲染TodoList组件，同时传入后端生成的动态参数 -->
<div 
  data-react-component="TodoList" 
  data-props="{{ json_encode(['user_id' => auth()->id(), 'initial_todos' => $todos]) }}"
></div>

<!-- 同页面可任意添加多个不同组件，互不影响 -->
<div data-react-component="UserCard" data-props="{{ json_encode($user) }}"></div>

3. 动态DOM适配 #

如果页面存在AJAX动态加载的内容，只需要在内容插入DOM后手动调用一次initReactComponents()即可完成新节点的组件渲染：

// jQuery AJAX回调示例
$.get('/api/get_partial_content', function(res) {
  $('#dynamic-content').html(res.html);
  // 初始化新插入节点中的React组件
  window.initReactComponents();
})

内容的提问来源于stack exchange，提问作者user1998000