ASP.NET Core MVC集成React组件：客户端交互与Props传递故障排查

一、环境依赖 #

确保安装以下包：

• NuGet：React.AspNet（核心集成包）、WebOptimizer.Core（替代@Scripts.Render的脚本打包工具）
• 前端：React 17+/ReactDOM 17+（React 18需调整渲染逻辑，暂推荐17以兼容ReactJS.NET）

二、后端配置（Program.cs/.NET 6+） #

var builder = WebApplication.CreateBuilder(args);

// 注册React服务
builder.Services.AddReact();
// 配置WebOptimizer：将wwwroot/js下所有js/jsx文件打包为/bundles/main
builder.Services.AddWebOptimizer(pipeline =>
{
    pipeline.AddJavaScriptBundle("/bundles/main", "wwwroot/js/**/*.js", "wwwroot/js/**/*.jsx");
});

// 注册MVC服务
builder.Services.AddControllersWithViews();

var app = builder.Build();

// 启用React中间件（必须在UseStaticFiles之前）
app.UseReact();
// 启用WebOptimizer中间件
app.UseWebOptimizer();

app.UseStaticFiles();
app.UseRouting();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

三、前端组件编写（wwwroot/js/App.jsx） #

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { clickCount: 0 };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({ clickCount: prevState.clickCount + 1 }));
        console.log("点击次数:", this.state.clickCount + 1);
    }

    render() {
        return (
            <div>
                <h1>Hello, {this.props.username}!</h1>
                <p>Model传递的数据：{this.props.modelContent}</p>
                <button onClick={this.handleClick}>点击计数</button>
                <p>计数：{this.state.clickCount}</p>
            </div>
        );
    }
}

// 暴露组件到全局，让ReactJS.NET能识别
window.App = App;

四、Razor页面集成（Index.cshtml） #

@model YourProject.Models.HomeViewModel
@using React.AspNet

@{
    ViewData["Title"] = "Home Page";
}

<!-- React组件容器 -->
<div id="react-root">
    @* 传递Razor Model数据到React组件 *@
    @Html.React("App", new { username = Model.UserName, modelContent = Model.DemoText })
</div>

<!-- 加载React、ReactDOM脚本（生产环境换min压缩版） -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 加载WebOptimizer打包后的组件脚本 -->
<script src="/bundles/main"></script>
<!-- 初始化客户端React，完成水合（启用交互逻辑） -->
@Html.ReactInitJavaScript()

五、逐个解决你的问题 #

1. ReactDOM.render无法传递Model数据 #

问题根源：直接引用Model会被HTML转义，导致JSON格式无效。解决办法：

<div id="root"></div>
<script>
    // 将Model序列化为未转义的JSON
    const modelData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model));
    ReactDOM.render(<App username={modelData.UserName} modelContent={modelData.DemoText} />, document.getElementById('root'));
</script>

2. @Html.React加载后无交互、console.log失效 #

问题根源：仅完成服务器端渲染（SSR），未执行客户端水合。解决：

• 确保加载客户端React/ReactDOM脚本
• 必须添加@Html.ReactInitJavaScript()，该方法会挂载React实例，绑定交互事件

3. 配置异常处理 #

• 找不到@Scripts.Render：ASP.NET Core已移除该方法，改用WebOptimizer打包脚本，用<script src="/bundles/main"></script>引用打包后的文件
• 找不到IHtmlString：确保安装React.AspNet最新版，并在Razor页面添加@using React.AspNet
• ~/bundles/main是什么：这是你在WebOptimizer中自定义的脚本打包路径，无需额外包，按上述配置即可生成
• 组件未定义/找不到React.Component：
  1. 脚本顺序错误：先加载React→ReactDOM→组件脚本
  2. 组件未暴露到全局：在组件末尾添加window.App = App;
  3. WebOptimizer打包规则未包含组件文件：检查路径是否正确

4. 直接用<App/>标签无法显示 #

Razor是服务器端模板引擎，无法解析JSX语法，必须通过ReactDOM.render或@Html.React方法渲染组件。

六、注意事项 #

• React 18适配：若使用React 18，需将ReactDOM.render替换为createRoot，此时@Html.ReactInitJavaScript()需自定义实现（暂推荐React 17简化配置）
• 生产环境：使用压缩版React脚本（react.production.min.js），并确保WebOptimizer启用压缩
• JSX编译：UseReact()中间件已自动处理JSX编译，无需额外配置

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