Question

通常，我要问的是“如何在React前端和C＃之间共享公共变量/对象？”。但请继续阅读以了解详细信息。

背景

我在一个结构如下的堆栈中工作：

API-.NET Core Web API

前端-.NET Core Razor / React

这两个共享一些模型和扩展，这些模型和扩展位于.NET Core编写的共享类库中。该库还包含整个项目中使用的所有枚举。

问题

假设我们在库中声明了一个名为UserRoles的枚举：

public enum UserRoles
{
    Admin = 1,
    User = 2
}

如果我想在Razor中显示UserRoles.Admin的值，我会这样做：

@using InternalLibrary.Enums
<p>@UserRoles.Admin</p>

但是，在React中，由于我无法（我知道）直接访问这些字段，因此遇到了一些麻烦。

所以我正在寻找一种干净的方法来将C＃枚举值注入到我的React前端。

到目前为止，我的解决方案是这样的：在我们的库中，我定义了一个IHtmlHelper-extension，它采用通用类型T并注入javascript，从而创建与我们的枚举相对应的javascript对象

public static IHtmlContent InjectEnum<T>(
    this IHtmlHelper helper,
    string name)
{
    var representation = new Dictionary<string, object>();
    var list = Enum.GetValues(typeof(T)).Cast<T>().ToList();

    foreach (var item in list)
    {
        var @enum = item as Enum;
        var property = @enum.ToString().ToLowerCamelCase();

        var description = @enum.GetDescription();
        var value = Convert.ToInt32(@enum);

        representation[property] = new { description, value };
    }

    var html = $"<script>var {name} = {representation.Serialize()}</script>";
    return helper.Raw(html);
}

稍后将在Razor视图中使用它，如下所示显示我们的React-app：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <base href="/" />
</head>
<body>
    @(Html.InjectEnum<UserRoles>("userRoles"))
    <script>console.log(userRoles)</script>
    <div id="root"></div>
    <script type="text/javascript" src="~/dist/app.js" asp-append-version="true"></script>
</body>
</html>

这意味着我可以在我的React-app中像在第一个Razor视图中那样做：

ReactDOM.render(
    <p>{userRoles.admin}</p>,
    rootElement
);

因此，由于我以前从未做过这样的事情，所以我正在寻求互联网上很棒的人的帮助。问题，对于这种方法是否有不当做法？有更好的/推荐的方法吗？

我考虑过的其他方法是：

硬编码对象（不好）
通过API从我们的后端获取它（对此开放），但由于它是异步的，因此意味着“ ifs and buts”的世界

将C＃值/对象注入React / Javascript前端

0 个答案: