如何向ASP.NET MVC应用中逐步注入多个React组件

核心思路：多入口打包+局部挂载 #

不用局限于单入口打包，你可以配置React构建工具（比如Vite、Webpack）生成多个独立的打包产物，每个对应一个可单独挂载的React组件，这样就能在Razor视图里按需引入、局部替换。

具体实现步骤 #

1. 配置多入口打包 #

以Vite为例，修改vite.config.js，指定多个入口文件，每个入口对应一个要替换的组件：

export default {
  build: {
    rollupOptions: {
      input: {
        userProfile: './src/components/UserProfile.jsx',
        orderList: './src/components/OrderList.jsx'
      },
      output: {
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js'
      }
    }
  }
}

Webpack的话，修改webpack.config.js的entry配置为对象形式，指定多个入口即可。

2. 编写可独立挂载的React组件 #

每个组件要包含挂载逻辑，比如UserProfile.jsx：

import React from 'react';
import ReactDOM from 'react-dom/client';
import UserProfile from './UserProfileComponent';

// 找到Razor视图中预留的DOM节点
const rootElement = document.getElementById('react-user-profile');
if (rootElement) {
  // 挂载React组件，通过dataset获取Razor传递的参数
  const root = ReactDOM.createRoot(rootElement);
  root.render(<UserProfile userId={rootElement.dataset.userId} />);
}

通过dataset属性可以从Razor视图传递初始化参数，实现前后端数据交互。

3. 在Razor视图中引入并预留挂载点 #

在需要替换的位置添加DOM容器，同时引入对应的React打包文件：

<!-- Razor视图原有内容 -->
<div class="user-section">
  <!-- 预留React组件挂载点，通过data属性传递参数 -->
  <div id="react-user-profile" data-user-id="@Model.UserId"></div>
</div>

<!-- 在页面底部引入对应的React打包文件 -->
<script src="~/dist/assets/userProfile.js"></script>

4. 逐步迭代替换 #

• 优先替换独立、低耦合的组件（比如用户信息卡片、订单列表）
• 当多个关联组件替换完成后，可将它们合并为子页面级的React应用，挂载到更大的DOM容器中
• 最终将整个Razor视图替换为React根组件，完成全量迁移

注意事项 #

• 样式隔离：使用CSS Modules、Tailwind CSS或CSS-in-JS方案，避免React组件样式与原有MVC项目样式冲突
• 路由过渡：保留原有MVC路由，让React组件在现有路由下运行，后续逐步迁移至React Router
• 状态管理：初期保持组件独立状态，组件增多后引入Redux、Zustand等工具共享状态

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