如何在 Razor 模板中有条件地渲染样式属性而不导致 NullReferenceException？

Question

我正在使用 C# 和 Razor Engine（Razor 模板引擎）开发一个模板项目。目标是使用我自己的 JSON 定义创建 React 代码。

当我想要渲染输入类型时，我的

AppDefinition.json

看起来像这样：

{
  "app": {
    "name": "AppName",
    "pages": [
      {
        "name": "UserDetailsForm",
        "url": "/list",
        "state": {
          "firstName": {
            "type": "string",
            "value": ""
          },
          "lastName": {
            "type": "string",
            "value": ""
          }
        },
        "layout": {
          "type": "Linear",
          "components": [
            {
              "type": "Input",
              "props": {
                "type": "text",
                "placeholder": "First Name"
              },
              "style": {}
            },
            {
              "type": "Input",
              "props": {
                "type": "text",
                "placeholder": "Last Name"
              },
              "style": {
                "color": "blue"
              }
            }
          ]
        }
      }
    ]
  }
}

这是我的 React Razor 模板：

@{
    var page = @Model.Pages[0];
}

function @page.Name () {
  return (
    <div className="App">
      <div className="form-container">
        <div className="card">
          <form>
            @{
              foreach (var Component in @page.Layout.Components) {
                if (Component.Type == "Input") {
                  <div className="form-group">
                    <input
                      @foreach (var prop in Component.Props) {
                        @Raw($"{prop.Key}=\"{prop.Value}\" ")
                      }
                      style={{
                        @foreach (var prop in Component?.Style) {
                          @Raw($"{prop.Key}:\"{prop.Value}\" ")
                        }
                      }}
                    />
                  </div>
                } else if (Component.Type == "Button") {
                  <div className="form-group">
                    <button
                      @foreach (var prop in Component.Props) {
                        @Raw($"{prop.Key}=\"{prop.Value}\" ")
                      }
                      style={{
                        @foreach (var prop in Component.Style) {
                          @Raw($"{prop.Key}:\"{prop.Value}\" ")
                        }
                      }}
                    >
                      @Component.Label
                    </button>
                  </div>
                }
              }
            }
          </form>
        </div>
      </div>
    </div>
  );
}

export default @page.Name;

问题： 我只想将样式属性添加到 Last Name 输入，而不是添加到 First Name 输入。但是，Razor 强制我将样式属性添加到两个输入，导致我为 “First Name” 输入包含一个空样式属性。

如果我从 JSON 中删除样式属性，Razor 会抛出 NullReferenceException，如下所示。

抛出错误的代码

"layout": {
  "type": "Linear",
  "components": [
    {
      "type": "Input",
      "props": {
        "type": "text",
        "placeholder": "First Name"
      },
    },
    {
      "type": "Input",
      "props": {
        "type": "text",
        "placeholder": "Last Name"
      },
      "style": {
        "color": "blue"
      }
    }
  ]
}

问题：

1. 这是 Razor 的预期行为，还是我做错了什么？

2. 在渲染样式之前，我是否应该在

   template.razor

   页面中添加条件？我尝试了多种方法，例如

   @if(Component.Style) {}

，但当到达

Component.Style

行时，它仍然会抛出 NullReferenceException。

我使用 Scriban 模板引擎来实现相同的结果，并且 Scriban 足够智能，当 JSON 中不存在样式标签时，不会将样式应用于输入。根据这次经验，我正在考虑使用 Scriban 而不是 Razor。

如果我在这里遗漏了什么，请告诉我。

参考文献：Razor Engine、Scriban

提前致谢！

Answer 1

乍一看，当 Component.Style 是名字时，您的

null

似乎

可能

可能是

Component

。 我会考虑检查

Component.Style

是否为 not null，如果不是，则继续执行 foreach：

style={{
        @if (Component?.Style != null)
        {
            foreach (var prop in Component.Style) {
                @Raw($"{prop.Key}:\"{prop.Value}\" ")
            }
        }
      }}