如何避免Blazor条件渲染元素重复生成HTML属性并优化代码？

完全可以用**属性展开（Attribute Splatting）**来解决这个重复问题，核心思路是把公共属性统一放到字典中，再动态添加条件属性，最后通过@attributes一次性渲染所有属性，避免重复写整个元素结构。

先看原来的重复代码（示例） #

@if (OnClick_Async != null)
{
    <div class="card" style="width: 18rem;" @onclick="HandleClick">
        <img src="card-img.png" class="card-img-top" alt="Card image">
        <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Card content here...</p>
        </div>
    </div>
}
else
{
    <div class="card" style="width: 18rem;">
        <img src="card-img.png" class="card-img-top" alt="Card image">
        <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Card content here...</p>
        </div>
    </div>
}

优化后的代码（使用属性展开） #

@{
    // 定义公共属性字典
    var elementAttrs = new Dictionary<string, object>
    {
        { "class", "card" },
        { "style", "width: 18rem;" }
    };

    // 条件添加@onclick属性
    if (OnClick_Async != null)
    {
        elementAttrs["onclick"] = EventCallback.Factory.Create(this, HandleClick);
    }
}

<!-- 只写一次元素结构，用@attributes渲染所有属性 -->
<div @attributes="elementAttrs">
    <img src="card-img.png" class="card-img-top" alt="Card image">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card content here...</p>
    </div>
</div>

@code {
    [Parameter]
    public Func<Task>? OnClick_Async { get; set; }

    private async Task HandleClick()
    {
        if (OnClick_Async != null)
        {
            await OnClick_Async();
        }
    }
}

关键说明 #

1. 属性展开的作用：@attributes会把字典中的键值对直接渲染为HTML元素的属性，包括Blazor的事件属性（比如onclick）。
2. 动态属性处理：通过判断OnClick_Async是否为空，动态向字典中添加事件属性，无需重复写整个<div>结构。
3. 简洁写法：如果不想在@code块里处理，直接在组件的渲染区域内联构建字典即可，代码更紧凑。

内容的提问来源于stack exchange，提问作者hamstar