如何配置React作为.NET应用的服务端邮件模板渲染工具？

以下是几种无需依赖过时的reactjs.net的实现方案，适配你的React迁移需求：

方案一：ASP.NET集成Node.js渲染服务 #

利用React官方的服务器端渲染能力，搭建轻量Node服务专门处理邮件模板渲染，ASP.NET通过HTTP调用获取HTML结果：

步骤： #

1. 搭建Node渲染服务
   用Express创建简单服务，接收模板名称和props参数，返回渲染后的HTML：

   // Node服务代码（src/server.ts）
   import express from 'express';
   import React from 'react';
   import { renderToString } from 'react-dom/server';
   import WelcomeEmail from './templates/WelcomeEmail';
   import PasswordResetEmail from './templates/PasswordResetEmail';
   
   const app = express();
   app.use(express.json());
   
   app.post('/render-email', (req, res) => {
     const { templateName, props } = req.body;
     let component;
     switch(templateName) {
       case 'welcome':
         component = <WelcomeEmail {...props} />;
         break;
       case 'password-reset':
         component = <PasswordResetEmail {...props} />;
         break;
       default:
         return res.status(400).send('无效模板');
     }
     const html = renderToString(component);
     // 包裹邮件基础结构（DOCTYPE、头部样式等）
     const fullHtml = `
       <!DOCTYPE html>
       <html>
         <head>
           <meta charset="UTF-8">
           <style>
             /* 全局邮件样式，兼容客户端 */
             body { font-family: Arial, sans-serif; }
           </style>
         </head>
         <body>${html}</body>
       </html>
     `;
     res.send(fullHtml);
   });
   
   app.listen(3001, () => console.log('邮件渲染服务运行在3001端口'));
   

2. 编写TypeScript邮件组件
   用TS定义props类型，确保类型安全：

   // templates/WelcomeEmail.tsx
   interface WelcomeEmailProps {
     userName: string;
     verificationLink: string;
   }
   
   export default function WelcomeEmail({ userName, verificationLink }: WelcomeEmailProps) {
     return (
       <div style={{ padding: '20px', border: '1px solid #eee' }}>
         <h2>欢迎你，{userName}！</h2>
         <p>点击下方链接验证你的邮箱：</p>
         <a href={verificationLink} style={{ color: '#007bff' }}>验证邮箱</a>
       </div>
     );
   }
   

3. ASP.NET调用渲染服务
   用HttpClient发送请求，获取HTML后发送邮件：

   // ASP.NET代码示例
   public async Task SendWelcomeEmail(string userName, string verificationLink, string toEmail)
   {
       var client = new HttpClient();
       var requestBody = new
       {
           templateName = "welcome",
           props = new { userName, verificationLink }
       };
       var response = await client.PostAsJsonAsync("http://localhost:3001/render-email", requestBody);
       var emailHtml = await response.Content.ReadAsStringAsync();
   
       // 调用邮件发送逻辑（比如SmtpClient或第三方邮件服务）
       var message = new MailMessage("noreply@yourdomain.com", toEmail)
       {
           Subject = "欢迎注册",
           Body = emailHtml,
           IsBodyHtml = true
       };
       // 发送邮件...
   }
   

方案二：用.NET JavaScript引擎直接执行React渲染 #

借助.NET生态的JS引擎（如Jint、V8.NET），在ASP.NET进程内执行React编译后的渲染逻辑，无需额外Node服务：

步骤： #

1. 打包React模板为可执行脚本
   用Vite/Webpack将邮件模板组件打包成UMD格式，导出渲染函数：

   // 入口文件src/render.ts
   import React from 'react';
   import { renderToString } from 'react-dom/server';
   import WelcomeEmail from './templates/WelcomeEmail';
   
   window.renderEmail = (templateName: string, props: any) => {
       switch(templateName) {
           case 'welcome':
               return renderToString(<WelcomeEmail {...props} />);
           // 其他模板...
       }
       return '';
   };
   

   打包后得到email-renderer.js，包含所有React依赖和模板逻辑。

2. ASP.NET中用Jint执行脚本
   引入Jint NuGet包，加载脚本并调用渲染函数：

   // ASP.NET代码示例
   public string RenderEmail(string templateName, object props)
   {
       var engine = new Jint.Engine();
       // 加载打包后的渲染脚本
       var script = File.ReadAllText(Path.Combine(Environment.ContentRootPath, "email-renderer.js"));
       engine.Execute(script);
   
       // 调用渲染函数
       var html = engine.Invoke("renderEmail", templateName, props).AsString();
       // 包裹邮件基础结构
       return $"<html><body>{html}</body></html>";
   }
   

关键注意事项 #

• 邮箱兼容性：邮件HTML需使用内联样式，避免外部CSS；可使用mjml-react库编写兼容主流邮箱的模板。
• 静态资源：图片等资源需使用绝对URL（如https://yourdomain.com/images/logo.png），确保邮箱能加载。
• 类型安全：保持React组件的TS类型定义，ASP.NET端可通过DTO类与组件props对应，避免数据不匹配。

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