.NET 8 Blazor组件渲染模式问题：DarkLightSwitch交互异常与组件丢失

问题核心 #

你的DarkLightSwitch组件需要交互式渲染才能响应点击事件，但静态渲染模式下无法触发组件的C#逻辑；直接在组件上添加@rendermode报错，是因为缺少.NET 8+的配置支持，且组件状态绑定逻辑存在缺陷。

步骤1：升级并配置项目支持交互式渲染 #

如果你的项目低于.NET 8，先升级到.NET 8或更高版本（组件级@rendermode是.NET 8新增特性）。然后在使用组件的Blazor Web App项目的Program.cs中添加交互式组件支持：

var builder = WebApplication.CreateBuilder(args);

// 添加Razor组件及交互式渲染支持
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()  // 支持Server交互式渲染
    .AddInteractiveWebAssemblyComponents(); // 支持WASM交互式渲染

var app = builder.Build();

app.UseStaticFiles();
app.UseAntiforgery();

// 映射组件并启用交互式渲染模式，同时引入组件库程序集
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(你的组件库命名空间._Imports).Assembly);

app.Run();

步骤2：修复DarkLightSwitch的状态绑定逻辑 #

原组件的IsDarkTheme是单向参数，点击修改后无法同步到父组件，需添加EventCallback实现双向绑定：

@inject IJSRuntime jsRuntime

<div class="darkLight-btn">
    <span class="icon @(IsDarkTheme ? "" : "active")" 
          id="light-icon" @onclick="OnLightClick">
        <i class="la la-sun"></i>
    </span>
    <span class="icon @(IsDarkTheme ? "active" : "")" 
          id="dark-icon" @onclick="OnDarkClick">
        <i class="la la-moon"></i>
    </span>
</div>

@code {
    [Parameter] public bool IsDarkTheme { get; set; } = false;
    [Parameter] public EventCallback<bool> IsDarkThemeChanged { get; set; }

    protected async Task OnLightClick(MouseEventArgs args)
    {
        await jsRuntime.InvokeVoidAsync("switchToLight");
        if (IsDarkThemeChanged.HasDelegate)
        {
            await IsDarkThemeChanged.InvokeAsync(false);
        }
    }

    protected async Task OnDarkClick(MouseEventArgs args)
    {
        await jsRuntime.InvokeVoidAsync("switchToDark");
        if (IsDarkThemeChanged.HasDelegate)
        {
            await IsDarkThemeChanged.InvokeAsync(true);
        }
    }
}

步骤3：启用组件交互（二选一） #

方式1：让父布局/页面整体启用交互式渲染

在MainLayout.razor顶部添加渲染模式声明，整个布局内的组件都会支持交互：

@rendermode RenderMode.InteractiveAuto

<!-- 原布局内容 -->
<TopNavBar Title="你的页面标题" />
@Body

方式2：单独为DarkLightSwitch启用交互式渲染

在TopNavBar中引用组件时直接指定渲染模式，不影响其他静态组件：

<div class="top-navbar style-1">
    <div class="container p-0">
        <div class="row align-items-center">
            <div class="title">
                @Title
            </div>
            <div class="col-lg-4">
                <DarkLightSwitch @bind-IsDarkTheme="@_isDarkTheme" @rendermode="RenderMode.InteractiveAuto" />
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter] public string Title { get; set; }
    private bool _isDarkTheme = false;
}

步骤4：确保JavaScript函数正常加载 #

在项目的wwwroot目录下创建theme-switch.js，写入主题切换逻辑：

function switchToLight() {
    document.documentElement.classList.remove('dark-theme');
    document.documentElement.classList.add('light-theme');
    localStorage.setItem('theme', 'light');
}

function switchToDark() {
    document.documentElement.classList.remove('light-theme');
    document.documentElement.classList.add('dark-theme');
    localStorage.setItem('theme', 'dark');
}

然后在App.razor或布局组件中引入该脚本：

<script src="theme-switch.js"></script>

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