Question

我正在创建2个blazor组件：import requests import pandas as pd from bs4 import BeautifulSoup import re import time for each_page in range(4,5): try: page_name = 'P' + "{:05d}".format(each_page) res = requests.get("http://www.conoserver.org/index.php?page=card&table=protein&id=" + str(each_page)) soup = BeautifulSoup(res.content, 'lxml') final_df = pd.DataFrame() precursor_table = soup.find_all('table',{'class':'cardtable'}) precursor_table_df = pd.read_html(str(precursor_table))[0].transpose() header = precursor_table_df.iloc[0] precursor_table_df = precursor_table_df[1:] precursor_table_df= precursor_table_df.rename(columns = header) print(precursor_table_df) except: pass和AlertMessage。 AlertMessageGroup设计为在其中包含多个AlertMessageGroup组件。我希望AlertMessage具有基于AlertMessageGroup的数量和类型的显示逻辑（AlertMessage是AlertMessageType的参数，可能会引用一个枚举值）。 / p>

父组件（例如AlertMessage）是否可以知道它包含多少子组件（例如AlertMessageGroup），并基于该子组件显示逻辑？

（我会理想地添加我希望能够使用一个单独的AlertMessage独立，而不必在AlertMessage中包含它我不想）

Answer 1

您可以在AlertMessageGroup组件中定义AlertMessage组件的集合，将捕获的组件引用（ this ）传递给AlertMessage，后者应在其OnInitialized生命周期事件中将自身添加到AlertMessageGroup中。

AlertMessage.razor的代码段

[CascadingParameter]
public AlertMessageGroup ContainerParent { get; set; }


protected override void OnInitialized()
{
    ContainerParent.AddChild(this);
}

AlertMessageGroup.razor的代码段

//将组件引用传递给子组件

 <CascadingValue Value=this>

    </CascadingValue>

    @code {
    // Code to add add the children to the parent...

    }

希望我很清楚...

Answer 2

这是最简单的解决方案：

第1步，创建一个警报框组件：

这是一个警报，您可以根据操作说明独立使用。

<div class="alert alert-primary" role="alert">
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
}

第2步，创建一个AlertGroup组件：

这是一个可以处理IEnumerable的T警报的组件。我们将使用TItem来指定AlertGroup是通用的。它可以处理我们扔给它的任何对象。接下来，我们遍历IReadOnlyList<TItem> Items并在AlertMessage内部呈现每个用户定义的模板。

@typeparam TItem

@foreach (var item in Items)
{
    <AlertMessage>
        @AlertTemplate(item)
    </AlertMessage>
}

@code {
    [Parameter]
    public RenderFragment<TItem> AlertTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

第3步，将其使用：

这是强制性的Counter组件。我们将劫持其行为以针对每个计数发出警报。我们还将通过简单地调用@alerts.Count()在单独的Razor输出中捕获总计数。对于OP，我们不需要内部跟踪计数，因为我们是从父级获取TItem。

由于在示例中使用的是int类型，因此我将内置Context参数定义为Value。如果这是一个对象，则可能会推断出类型，我们可以使用点表示法，例如：context.Prop。

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<AlertMessageGroup Items="alerts" Context="Value">
    <AlertTemplate>
        <span>My value is @Value</span>
    </AlertTemplate>
</AlertMessageGroup>

<p>@alerts.Count()</p>

@code {

    List<int> alerts = new List<int>();

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        alerts.Add(currentCount);
    }
}

Blazor父组件可以知道其中有多少子组件吗？

2 个答案: