如何避免在 Blazor 的渲染树中插入额外的空格和“\r\n”

Question

以下示例代码

<div>
    @for (int i = 0; i < 10; i++)
    {
        <span class="@classes[i]">@i</span>
    }
</div>

我想要显示的是（每个字符的风格不同）

01234567890

但实际显示的是（每个字符之间的额外空格）

0 1 2 3 4 5 6 7 8 9

我使用 ILSpy 调查渲染树中发生的情况，发现如下

        __builder.OpenElement(2, "div");
        __builder.AddMarkupContent(3, "\r\n");
        for (int i = 0; i < 10; i++)
        {
            __builder.AddContent(4, "        ");
            __builder.OpenElement(5, "span");
            __builder.AddAttribute(6, "class", classes[i]);
            __builder.AddContent(7, i);
            __builder.CloseElement();
            __builder.AddMarkupContent(8, "\r\n");
        }
        __builder.CloseElement();

序列4添加了额外的空格，序列8添加了“\r\n”，我认为这是字符之间额外的空格的原因。

我可以通过这样写来缓解这个问题

<div>@for (int i = 0; i < 10; i++)
{<span class="@classes[i]">@i</span>}
</div>

但是，当同一行中有更多不同的内容时，代码会很长。此外，当我按 Ctrl+D 格式化文档时，在某些情况下 VS 会以错误的方式“修复”代码。

我想看看对于这个问题是否有更好的建议。我考虑过（但还没有找到解决方案）

1. 使用 CSS 忽略跨度之间的空格和\r\n
2. 以某种方式添加额外的 @{} 来帮助格式化。
3. 一些用于避免空格的神奇参数，\r\n 添加到了渲染树中。

Answer 1

我猜你仍在使用 aspnetcore 3.x，因为这已在 .NET5 中修复。

在 .NET5 Blazor 项目中尝试一下 - 它应该可以正常工作。