如何使用 RactJS 组件在 ASP.NET CORE MVC 项目上实现客户端

Question

我有一个 ASP.NET CORE MVC 项目，我希望我的 Razor 页面实现 ReactJS 组件。 我可以加载组件应用程序，但是当我尝试使用 console.log 时它不起作用。我发现这是因为组件仅在服务器端加载，但我找不到正确的方法来允许我的客户端访问组件并使用 js 在控制台中打印我想要的值。

我尝试的第一个解决方案是点击此链接：https://reactjs.net/features/server-side-rendering.html

但是当它说要添加时：

@Scripts.Render("~/bundles/main")
@Html.ReactInitJavaScript()

我有两个问题：

1. 不要找到@Script，所以我必须安装 WebOptimize..但现在它说不能优化 Ihtml 字符串
2. 我没有这个“~/bundles/main”，那个文件是什么？我必须安装软件包？
3. 显示了 ReactInitJavaScript 组件，但在检查器中显示该组件未定义并且在类中找不到 React.Component

   因此，显示了值，但我无法访问控制台。我必须在代码中插入什么才能启用客户端？

   _Layout.cshtml：

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>@ViewData["Title"] - SportData</title>
       <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
       <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
       
       <link rel="stylesheet" href="~/css/card.css" asp-append-version="true" />
   </head>
   <body>
        
       <div class="container">
           <main role="main" class="pb-3">
               @RenderBody()
           </main>
       </div>
     
   
       <script src="~/lib/jquery/dist/jquery.min.js"></script>
       <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
       
       @await RenderSectionAsync("Scripts", required: false)
   </body>
   
   </html>
   

   索引.cshtml

   @using Newtonsoft.Json;
   @using SportData.Web.Models;
   @using System.Web.Optimization;
   
   
   @model SportContainer
   
   
   @Html.React("App",new { Property1 = "value1", Property2 = "value2" })
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
   @Scripts.Render("~/bundles/main")
   @Html.ReactInitJavaScript()
                
   

   应用程序.jsx：

   class App extends React.Component{
   
       componentDidMount() {
           console.log('hi')
       }
       
       render() {
           console.log(this.props)
           const { Property1, Property2 } = this.props
   
           const handler = (event) => {
               console.log(event);
           }
           return (
               <div>
                   <button onClick={handler}> clicca </button>
                   {console.log(this.props)}
                   <p>Property1: {Property1}</p>
                   <p>Property2: {Property2}</p>
                   <div className="box">Sono un box</div>
               </div>
   
               );
       }
   }
   

   程序.cs：

   var builder = WebApplication.CreateBuilder(args);
           
           // Add services to the container.
           builder.Services.AddControllersWithViews();
   
           builder.Services.AddMvc().AddRazorRuntimeCompilation();
   
           //builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();  
           builder.Services.AddReact();
           builder.Services.AddHttpContextAccessor();
           
           builder.Services.AddJsEngineSwitcher(option => option.DefaultEngineName = V8JsEngine.EngineName).AddV8();
           
           
           var app = builder.Build();
           // configure middleware
           
           // Configure the HTTP request pipeline.
           if (!app.Environment.IsDevelopment())
           {
               app.UseExceptionHandler("/Home/Error");
               app.UseHsts();
           }
   
           app.UseReact(config => {
               config.AddScript("~/js/App.jsx");
           });
           
           ReactSiteConfiguration.Configuration.JsonSerializerSettings.ContractResolver = new DefaultContractResolver();
   
           
           app.UseHttpsRedirection();
           app.UseStaticFiles();
   
           app.UseRouting();
   
           app.UseAuthorization();
   
           app.MapControllerRoute(
               name: "default",
               pattern: "{controller=Home}/{action=Index}/{id?}");
   
           app.Run();
           
   

Answer 1

你必须将 react js 与 api 一起使用，这是一种方式。因为如果你将像这样使用 react js，你将无法制作丰富的 ui 并且还会出现 packges 问题，但如果你想这样使用，那么你必须这样使用。 check here