如何在Blazor Server应用中实现可正常运行的Flip计数器插件

问题根源 #

Blazor Server通过SignalR维护DOM与服务端组件状态的同步，直接在JS中修改Flip组件的DOM状态时，Blazor的组件渲染机制无法感知这些变化；同时原方案的JS间隔操作未与Blazor生命周期绑定，导致UI更新失效（但数值逻辑仍在后台运行）。

解决方案：用Blazor组件封装+JS互操作同步状态 #

我们需要将Flip计数器的状态管理交给Blazor，通过JS互操作完成组件初始化与UI更新，确保状态变化能触发Blazor的渲染流程。

步骤1：调整布局页的JS代码

在_Layout.cshtml的<head>保留Flip的CSS和JS引用，替换原测试脚本为可被Blazor调用的全局函数：

<link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet">
<script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>

<script>
    let flipInstances = {};

    // 初始化Flip计数器
    window.initFlipCounter = function(elementId, initialValue) {
        flipInstances[elementId] = Tick.DOM.create(document.getElementById(elementId), {
            value: initialValue
        });
        // 初始化无障碍标签
        flipInstances[elementId].root.setAttribute('aria-label', initialValue);
    }

    // 更新Flip计数器数值
    window.updateFlipCounter = function(elementId, newValue) {
        if (flipInstances[elementId]) {
            flipInstances[elementId].value = newValue;
            flipInstances[elementId].root.setAttribute('aria-label', newValue);
        }
    }

    // 销毁实例（可选，用于清理）
    window.disposeFlipCounter = function(elementId) {
        if (flipInstances[elementId]) {
            flipInstances[elementId].destroy();
            delete flipInstances[elementId];
        }
    }
</script>

步骤2：创建Blazor封装组件

新建FlipCounter.razor组件，负责管理计数器状态、生命周期与JS互操作：

@inject IJSRuntime JSRuntime
@implements IDisposable

<div id="@_elementId" class="tick">
    <div data-repeat="true" aria-hidden="true">
        <span data-view="flip"></span>
    </div>
</div>

@code {
    private readonly string _elementId = $"flip-counter-{Guid.NewGuid()}";
    private int _currentValue = 1234;
    private Timer _updateTimer;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 初始化Flip组件
            await JSRuntime.InvokeVoidAsync("initFlipCounter", _elementId, _currentValue);
            
            // 启动定时更新任务
            _updateTimer = new Timer(async _ =>
            {
                _currentValue++;
                // 通知Blazor状态已变更，触发组件渲染
                await InvokeAsync(StateHasChanged);
                // 通过JS同步更新Flip UI
                await JSRuntime.InvokeVoidAsync("updateFlipCounter", _elementId, _currentValue);
            }, null, 0, 1000);
        }
    }

    public void Dispose()
    {
        // 清理定时器与Flip实例
        _updateTimer?.Dispose();
        _ = JSRuntime.InvokeVoidAsync("disposeFlipCounter", _elementId);
    }
}

步骤3：在页面中使用组件

在Index.razor中直接引用封装好的组件即可：

<FlipCounter />

关键说明 #

1. 状态管理：计数器数值由Blazor组件的_currentValue维护，确保状态变化能被Blazor追踪。
2. JS互操作：通过IJSRuntime调用全局JS函数完成Flip的初始化与更新，避免直接在JS中操作DOM导致的状态不同步。
3. 生命周期绑定：在OnAfterRenderAsync中初始化组件，确保DOM已渲染完成；实现IDisposable清理资源，防止内存泄漏。

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