MudBlazor中MudTree的自动展开与自动滚动问题求助

核心问题分析 #

• 原代码为每个评论生成独立<MudTreeView>，导致多个树组件并行渲染，展开时互相挤压布局
• 未利用MudTreeView的内置层级管理能力，无法统一控制节点展开状态和定位

解决方案步骤 #

1. 统一TreeView结构，用单TreeView承载所有评论层级 #

将所有根评论作为顶层TreeViewItem放入同一个MudTreeView，通过嵌套TreeViewItem实现层级，避免多TreeView冲突。

2. 按需加载子评论（基于父ID） #

利用MudTreeViewItem的ExpandedChanged事件，触发API请求获取子评论，动态添加到当前节点的子项中；或者使用MudTreeView的ServerData回调（更贴合组件原生设计）。

3. 实现指定ID自动展开并滚动 #

• 维护TreeView的组件引用，通过递归遍历TreeItemData集合找到目标节点
• 调用TreeView的ExpandToItem方法展开路径
• 使用JSInterop滚动到对应的TreeViewItem元素

修改后的完整代码示例 #

@inject IJSRuntime JSRuntime

<MudTreeView @ref="_treeView"
             Hover ExpandOnClick
             SelectionMode="SelectionMode.SingleSelection"
             @bind-SelectedValue="SelectedValue">
    @foreach (var rootComment in RootComments)
    {
        <MudTreeViewItem @key="rootComment.Id"
                         Value="@rootComment.Id"
                         Text="@rootComment.Content"
                         ExpandedChanged="@(() => LoadChildComments(rootComment))">
            @if (rootComment.Children != null && rootComment.Children.Any())
            {
                @foreach (var child in rootComment.Children)
                {
                    <CommentTreeItem Comment="@child" OnExpandChild="LoadChildComments" />
                }
            }
        </MudTreeViewItem>
    }
</MudTreeView>

@code {
    private MudTreeView<string> _treeView;
    private string SelectedValue { get; set; }
    private List<Comment> RootComments { get; set; } = new();
    // 目标评论ID，可通过参数或其他方式传入
    [Parameter] public string TargetCommentId { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // 加载顶层评论
        RootComments = await LoadRootCommentsAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !string.IsNullOrEmpty(TargetCommentId))
        {
            await AutoExpandAndScrollToTarget(TargetCommentId);
        }
    }

    /// <summary>
    /// 加载子评论并更新父评论的Children集合
    /// </summary>
    private async Task LoadChildComments(Comment parentComment)
    {
        if (parentComment.Children == null)
        {
            // 调用API通过父ID获取子评论
            parentComment.Children = await GetCommentsByParentIdAsync(parentComment.Id);
            StateHasChanged();
        }
    }

    /// <summary>
    /// 自动展开到目标评论并滚动
    /// </summary>
    private async Task AutoExpandAndScrollToTarget(string targetId)
    {
        // 递归查找目标节点
        var targetItem = FindTreeItem(RootComments, targetId);
        if (targetItem != null)
        {
            // 展开到目标节点
            await _treeView.ExpandToItem(targetId);
            // 滚动到对应的DOM元素
            await JSRuntime.InvokeVoidAsync("scrollIntoView", $"#comment-item-{targetId}");
        }
    }

    /// <summary>
    /// 递归查找目标评论节点
    /// </summary>
    private Comment FindTreeItem(List<Comment> comments, string targetId)
    {
        foreach (var comment in comments)
        {
            if (comment.Id == targetId)
                return comment;
            if (comment.Children != null)
            {
                var child = FindTreeItem(comment.Children, targetId);
                if (child != null)
                    return child;
            }
        }
        return null;
    }

    // 模拟API请求方法
    private async Task<List<Comment>> LoadRootCommentsAsync()
    {
        // 替换为实际API调用
        await Task.Delay(100);
        return new List<Comment>
        {
            new Comment { Id = "1", Content = "顶层评论1" },
            new Comment { Id = "2", Content = "顶层评论2" }
        };
    }

    private async Task<List<Comment>> GetCommentsByParentIdAsync(string parentId)
    {
        // 替换为实际API调用，通过parentId获取子评论
        await Task.Delay(100);
        return new List<Comment>
        {
            new Comment { Id = $"{parentId}-1", Content = $"子评论{parentId}-1" },
            new Comment { Id = $"{parentId}-2", Content = $"子评论{parentId}-2" }
        };
    }

    // 评论模型
    public class Comment
    {
        public string Id { get; set; }
        public string Content { get; set; }
        public List<Comment> Children { get; set; }
    }
}

<!-- 嵌套子项的复用组件 CommentTreeItem.razor -->
<MudTreeViewItem @key="Comment.Id"
                 Id="@($"comment-item-{Comment.Id}")"
                 Value="@Comment.Id"
                 Text="@Comment.Content"
                 ExpandedChanged="@(() => OnExpandChild(Comment))">
    @if (Comment.Children != null && Comment.Children.Any())
    {
        @foreach (var child in Comment.Children)
        {
            <CommentTreeItem Comment="@child" OnExpandChild="OnExpandChild" />
        }
    }
</MudTreeViewItem>

@code {
    [Parameter] public Comment Comment { get; set; }
    [Parameter] public Func<Comment, Task> OnExpandChild { get; set; }
}

关键改进点说明 #

• 单TreeView结构：所有评论层级都在同一个MudTreeView中，避免多个树组件的布局冲突
• 按需加载逻辑：通过ExpandedChanged触发子评论加载，仅在用户展开时请求API，符合需求
• 自动展开与滚动：利用组件引用_treeView调用ExpandToItem展开路径，结合JSInterop实现滚动定位
• 复用子组件：通过CommentTreeItem组件简化嵌套逻辑，代码更清晰

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