Blazor中OnAfterRenderAsync调用后DOM存在但页面不显示内容的问题

你遇到的核心问题是直接操作DOM后，Blazor组件渲染状态与真实DOM不同步，或是元素样式导致内容不可见。以下是针对性解决思路：

1. 优先排查CSS样式问题 #

既然开发者工具中能看到DOM结构，先确认第二个div的样式是否存在以下情况：

• 被设置了display: none、visibility: hidden或opacity: 0
• 存在overflow: hidden但高度未正确计算
• 被其他元素遮挡（z-index层级过低）

2. 改用Blazor状态驱动UI（推荐） #

Blazor的设计逻辑是状态驱动渲染，不建议直接操作DOM。如果DisplayOtherContent是通过JS互操作修改DOM，改成绑定组件属性的方式：

• 定义变量存储待渲染数据：private List<YourDataModel> _secondDivContent;
• 在DisplayOtherContent中加载数据并赋值给变量
• 在Razor模板中直接渲染：

<div>
    @foreach (var item in _secondDivContent ?? Enumerable.Empty<YourDataModel>())
    {
        <!-- 渲染单个内容项 -->
        <p>@item.Content</p>
    }
</div>

这种方式下，StateHasChanged()会自动同步UI与状态，确保内容正常显示。

3. 调整DOM操作逻辑（若必须直接操作） #

如果一定要手动修改DOM，修正代码逻辑避免Blazor覆盖你的操作：

• 用ElementReference定位目标元素，而非全局选择器
• 移除不必要的StateHasChanged()（调用它会触发Blazor重新渲染，可能覆盖手动修改的DOM）

// Razor模板中定义元素引用
<div @ref="_targetDiv"></div>

// 组件代码
private ElementReference _targetDiv;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (!firstRender && _isLoaded)
    {
        // 通过ElementReference调用JS修改DOM
        await JSRuntime.InvokeVoidAsync("appendContentToDiv", _targetDiv);
    }

    await base.OnAfterRenderAsync(firstRender);
}

4. 确认_isLoaded的触发时机 #

检查_isLoaded是否在第一个div的数据完全渲染完成、高度计算完毕后才设置为true。如果触发过早，DisplayOtherContent可能基于错误的高度生成内容，导致显示异常。

内容的提问来源于stack exchange，提问作者Imran Ahmad Shahid