未知深度的递归分量答案

【问题标题】：Recursive Component of unknown depth未知深度的递归分量
【发布时间】：2021-10-09 02:23:22
【问题描述】：

我正在使用 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;
    }
   }

【问题讨论】：

请查看您的代码示例 - 它似乎不完整 - 例如，没有调用 SetChildItem。
我认为ResourceList = await GetResources(); 正在重新触发OnParametersSetAsync 导致无限循环。
@MisterMagoo 您是正确的，已编辑。但是，这不会影响我描述的无限递归问题
可以肯定的是，这里显示的顶级组件也是 ChildResourceList 吗？
@Bennyboy1973 这似乎是朝着正确的方向发展。我会玩那个。谢谢。

标签： .net blazor blazor-webassembly

【解决方案1】：

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

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

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

【讨论】：

Henk，我会试试看它是否有效。谢谢。