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

问：

[编辑]好的，我不明白，如果我使用 ReactDOM.render 在 id=“root” 的 div 中渲染我的类，它可以工作，我可以使用 console.log（）。但是我需要这个组件，即在 Razor 页面中，可以作为道具接收 Razor 模型的一些数据。（例如，用户列表）。因此，我决定使用 @Html.React 来加载组件。但是如果我使用此方法，我可以传递属性，但console.log（不起作用。我该怎么办？而且，有一种方法可以在剃须刀页面中使用组件作为“”？？

[编辑] 我想做这样的事情，但组件不再显示。

<div id="root">
    <App/>
</div>

<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>
<script src="@Url.Content("https://unpkg.com/@babel/standalone/babel.min.js")"></script>
<script src="@Url.Content("~/js/app.jsx")" type="text/babel"></script>

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

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

但是当它说要添加：

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

我有 2 个问题：

不要@Script所以我不得不安装 WebOptimize..但现在它说不能对 Ihtml 字符串进行罚款
我没有这个'~/bundles/main'，那个文件是什么？我必须安装软件包吗？
使用 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()

App.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();

ReactJS 客户端控制台：.log

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

How to implement client-side on ASP.NET CORE MVC project with RactJS Component

评论

评论