时间戳

首页 > 解决方案 > 未知深度的递归分量

.net - 未知深度的递归分量

问题描述

我正在使用 Blazor WASM 和 .Net 5。

我有一个未知深度的分层数据结构。当我的组件加载时，我会显示数据结构的第一级。当用户单击其中一个项目时，它应该在从 API 调用加载数据后加载下一个级别。然后，您可以继续单击，直到没有更多级别。

我以为我可以使用自引用组件来做到这一点，但我得到的似乎是一个无限递归循环。我这么说是因为当我运行应用程序并单击初始列表中的某些内容时，应用程序会冻结。

“刀片”只是一些带有一些事件回调和“可见”属性的 HTML 标记。“ForEach”是一个组件迭代器。对它们的工作方式不应该至关重要

该组件是“ChildResourceList”，如您所见，它具有对自身的引用。

问题是......你如何让嵌套的 ChildResourceList 按需呈现？有没有我可以采取不同的方法而不必创建 GrandChildResouceList、GreatGrandchildResourceList 等内容？

     @inject IHttpClientFactory factory;
     <Blade Visible="Visible" OnCloseButtonClick="OnClose" Title="@SelectedItem?.ResourceName">
      <ForEach Context="r" Items="ResourceList">
         <div @onclick="(() => SetChildItem(r.Item))">
          @r.Item.ResourceName
         </div>
      </ForEach>
     </Blade>

<ChildResourceList SelectedItem="ChildSelectedItem" Visible="ChildVisible"></ChildResourceList>
     
     @code {

    [Parameter] public EventCallback OnClose { get; set; }
    [Parameter] public bool Visible { get; set; }
    [Parameter] public Resource SelectedItem { get; set; }

    Resource ChildSelectedItem { get; set; }
    bool ChildVisible { get; set; }
    List<Resource> ResourceList { get; set; } = new();

    protected override async Task OnParametersSetAsync()
    {
        if (SelectedItem != null)
            ResourceList = await GetResources();
    }

    async Task<List<Resource>> GetResources()
    {
        HttpClient client = factory.CreateClient(name: "api");
        return await client.GetFromJsonAsync<List<Resource>>($"{Endpoints.Features.ResourceExplorer.GetChildResources}/{SelectedItem.ResourceUID.ToString()}");
    }

    void SetChildItem(Resource item)
    {
        ChildSelectedItem = item;
        ChildVisible = true;
    }

    void OnChildClose()
    {
        ChildVisible = false;
        ChildSelectedItem = null;
    }
   }

标签： .netblazorblazor-webassembly

解决方案

它在标记部分看起来确实像无限递归。您的组件现在将始终有一个子部分。你需要一个@if()围绕递归：

@if (ChildSelectedItem != null)
{
  <ChildResourceList SelectedItem="ChildSelectedItem" Visible="ChildVisible"></ChildResourceList>
}

您将 ChildVisible 传递给 Blade ( <Blade Visible="Visible") 但嵌套列表在该 Blade 之外。

推荐阅读