主页 / coding / 问题 / 79196555
Accepted
hamstar
Asked: 2024-11-17 13:35:16 +0800 CST

如何避免在条件渲染元素之间重复 Blazor 生成的 HTML 属性？

  • 772

简而言之，我怎样才能使这段代码更好：

@if( this.OnClick_Async is not null ) {
    <div component-name="TermDisplay" class="basic"
            @onclick=@(async e => await this.OnClick_Async(e))
            onmouseover="if(@(this.Term.Context is not null) == true && @(this.Term.Context.Context is not null) == true) { window.DisplayMousePopup(event, `@this.Term.Context.Context.Term`); }">
        @this.Term.ToString()
    </div>
} else {
    <div component-name="TermDisplay" class="basic"
            onmouseover="if(@(this.Term.Context is not null) == true && @(this.Term.Context.Context is not null) == true) { window.DisplayMousePopup(event, `@this.Term.Context.Context.Term`); }">
        @this.Term.ToString()
    </div>
}

因为属性使用 Blazor，所以我不确定是否可以简单地使用属性分散来解决。

编辑：我意识到我可能针对给定的代码问了错误的问题，但主要问题仍然存在。

asp.net-core

1 个回答

  1. Best Answer

    假设OnClick_Async可能是参数Func或EventCallback，您可以按照以下方法更改具体情况。

    我简化了onmouseover以提供最小可重现示例。您需要重新添加代码。

    <div component-name="TermDisplay" class="basic"
     @onclick="this.OnButtonClick"
     onmouseover="window.DisplayMousePopup(event, `@_value`);">
    @_value
</div>

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

    private string _value = "Hello Blazor";

    private async Task OnButtonClick(MouseEventArgs e)
    {
        // if using a Event
        await this.OnClick.InvokeAsync(e);

        // If using a Func
        if (this.OnClick_Async is not null)
            await this.OnClick_Async.Invoke(e);

        // or if there's nothing to await
        this.OnClick_Async?.Invoke(e);
    }
}

    在更复杂的情况下，另一种方法是使用 RenderTreeBuilder 进行构建RenderFragment。以下是有关此主题的 MS Docs 文章：

    https://learn.microsoft.com/en-us/aspnet/core/blazor/advanced-scenarios?view=aspnetcore-8.0

    • 1

相关问题