组件内的 Blazor @key

Question

我浏览了 Blazor @key 用法的

docs

。但我不确定它在其中未提及的一种特定情况下是否能正常工作。

如果代替

Page.razor

中的这段代码会发生什么：

<div>
    @foreach (var person in people)
    {
        <Details @key="person" Person="@person" />
    }
</div>

我会将

@key

放置在

Details

组件本身内部。所以对于

Details.razor

它看起来像：

<div @key=@Person>
    @* The rest of the component UI *@
</div>

@code{
    [Parameter] public required Person Person { get; set; }
}

因为这样当我在多个页面中循环这个组件时，我不必总是在 foreach 中指定

@key

参数。但 Blazor 是否将其视为相同/不同范围？

Answer 1

我认为没有办法做到这一点。正如文档所说，

@key

应该添加到同一级别，例如

<div @key=person1>
<div @key=person2>
...

但是当你把它放在子组件中时。你实际上把它们包裹起来：

<Details>
    <div @key=person1>
</Details>
<Details>
    <div @key=person2>
</Details>

@key

范围由每个“细节”隔离，因此不会按您的预期工作。文件里还提到了

“使用@key时避免以下模式......”