MudTreeViewItem动态设置Activated：仅选子项时应用冻结如何解决？

直接给MudTreeViewItem设置Activated="@(!context.HasChild)"会导致应用冻结，原因是Activated绑定的表达式会触发组件无限重渲染——每次渲染时HasChild作为计算属性会被重新计算，引发状态变更，进而触发新一轮渲染，循环往复最终卡死应用。

正确的做法是使用Selectable属性控制项是否可被选择，而非Activated（Activated用于控制键盘导航时的激活状态，并非选择权限）。

修正后的HTML代码 #

<MudPaper Width="350px" MaxHeight="500px" Class="overflow-y-auto" Elevation="0">
    <MudTreeView Items="@TreeItems" @bind-SelectedValue="SelectedValue" Hover="true">
        <ItemTemplate>
            <!-- 使用Selectable控制是否允许选择，仅无子女的节点可被选中 -->
            <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" 
                             Value="@context" Selectable="@(!context.HasChild)">
                <Content>
                    <MudTreeViewItemToggleButton @bind-Expanded="@context.IsExpanded" Visible="@context.HasChild" />
                    <MudIcon Icon="@context.Icon" Class="ml-0 mr-2" Color="@Color.Default" />
                    <MudText>@context.Text</MudText>
                </Content>
            </MudTreeViewItem>
        </ItemTemplate>
    </MudTreeView>
</MudPaper>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">
    <strong>
        <i>Debug</i>
    </strong> Selected item: @(SelectedValue?.Text ?? "no selected value")
</MudText>

C#代码（无需修改，保持原逻辑即可） #

public partial class LayersTreeView
{
    private TreeItemData? SelectedValue;
    private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();
    
    public class TreeItemData
    {
        public string Text { get; set; }
        public string Icon { get; set; }
        public bool IsExpanded { get; set; } = true;
        public bool HasChild => TreeItems != null && TreeItems.Count > 0;
        public HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();
        
        public TreeItemData(string text, string icon)
        {
            Text = text;
            Icon = icon;
        }
    }

    protected override void OnInitialized()
    {
        TreeItems.Add(new TreeItemData(".azure", Icons.Custom.Brands.MicrosoftAzure));
        TreeItems.Add(new TreeItemData(".github", Icons.Custom.Brands.GitHub));
        TreeItems.Add(new TreeItemData(".vscode", Icons.Custom.Brands.MicrosoftVisualStudio));
        TreeItems.Add(new TreeItemData("content", Icons.Custom.FileFormats.FileDocument));
        TreeItems.Add(new TreeItemData("src", Icons.Custom.FileFormats.FileCode)
        {
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("MudBlazor", Icons.Custom.Brands.MudBlazor), 
                new TreeItemData("MudBlazor.Docs", Icons.Custom.FileFormats.FileDocument)
                {
                    TreeItems = new HashSet<TreeItemData>()
                    {
                        new TreeItemData("_Imports.razor", Icons.Filled.AlternateEmail), 
                        new TreeItemData("compilerconfig.json", Icons.Custom.FileFormats.FileImage), 
                        new TreeItemData("MudBlazor.Docs.csproj", Icons.Custom.Brands.MicrosoftVisualStudio), 
                        new TreeItemData("NewFilesToBuild.txt", Icons.Custom.FileFormats.FileDocument), 
                    }
                }, 
                new TreeItemData("MudBlazor.Docs.Client", Icons.Filled.Folder), 
                new TreeItemData("MudBlazor.Docs.Compiler", Icons.Filled.Folder), 
                new TreeItemData("MudBlazor.Docs.Server", Icons.Filled.Folder), 
                new TreeItemData("MudBlazor.UnitTests", Icons.Filled.Folder), 
                new TreeItemData("MudBlazor.UnitTests.Viewer", Icons.Filled.Folder), 
                new TreeItemData(".editorconfig", Icons.Custom.FileFormats.FileCode), 
                new TreeItemData("MudBlazor.sln", Icons.Custom.Brands.MicrosoftVisualStudio)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Filled.Folder));
    }
}

说明 #

• Selectable="@(!context.HasChild)"确保只有无子女的叶子节点可以被选择，父节点点击不会触发选中操作。
• 替换Activated为Selectable后，避免了无限重渲染的问题，因为Selectable仅控制选择权限，不会引发循环状态变更。

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