RenderFragment导致所有相同类型的组件更新

Question

我在编写Blazor服务器组件时遇到了一些问题。我有一个自定义组件，在同一页面上多次使用。当任一组件的属性发生更改时，两个组件都会重新渲染/更新(如果组件中使用了RenderFragment(为什么？我该如何修复它，以便只有正确组件上的属性只呈现该组件的更新，而不更新所有其他组件

只有当使用RenderFragment。从组件中删除RenderFragment和@ChildContent可以修复此问题。

我创建了一个简单的示例来演示这个问题。

第页。剃刀

@page "/"
<div>
<button @onclick="OnClick_Update_1">Update 1</button>
<button @onclick="OnClick_Update_2">Update 2</button>
</div>
<h3>Component 1</h3>
<MyComponent PlayNice="DoUpdate_1">ABC</MyComponent>
<h3>Component 2</h3>
<MyComponent PlayNice="DoUpdate_2">DEF</MyComponent>
@code{
private bool DoUpdate_1 { get; set; } = false;
private bool DoUpdate_2 { get; set; } = false;
private void OnClick_Update_1(){
DoUpdate_1 = true;
}
private void OnClick_Update_2() {
DoUpdate_2 = true;
}
}

MyComponent.rarzor

<p class="@_class">@ChildContent - @DateTime.UtcNow</p>
@code {
[Parameter] public bool PlayNice { get; set; } = false;
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
private string _class { get; set; } = default!;
protected override void OnParametersSet() {
_class = string.Empty;
if (PlayNice)
_class += "abcdef";
base.OnParametersSet();
}
}

此处提供了一个工作示例：https://blazorfiddle.com/s/facmehiz(交替点击按钮-两个组件都将更新(

没有RenderFragment的示例：https://blazorfiddle.com/s/0w11bbxw(这是我想要的结果，但我想使用RenderFragment(

谢谢。

Answer 1

下面的代码片段演示了如何一次渲染每个组件。。。每次点击"；更新1"；，则CCD_ 5的第一实例被重新渲染。每次点击"；更新2"；，CCD_ 6的第二实例被重新渲染。复制并测试。。。

MyComponent.razor

<p class="@_class">@ChildContent - @DateTime.UtcNow</p>
@code {
[Parameter] public bool PlayNice { get; set; }
[Parameter] public EventCallback<bool> PlayNiceChanged { get; set; }

[Parameter] public RenderFragment ChildContent { get; set; }
private string _class { get; set; }
protected override bool ShouldRender()
{
return PlayNice;
}
protected override void OnParametersSet()
{
_class = string.Empty;
if (PlayNice)
{
PlayNiceChanged.InvokeAsync(false);
_class += "abcdef";
}
}
} 

索引.razor

@page "/"
<div>
<button @onclick="OnClick_Update_1">Update 1</button>
<button @onclick="OnClick_Update_2">Update 2</button>
</div>
<h3>Component 1</h3>
<MyComponent @bind-PlayNice="DoUpdate_1">ABC</MyComponent>
<h3>Component 2</h3>
<MyComponent @bind-PlayNice="DoUpdate_2">DEF</MyComponent>
@code{
private bool DoUpdate_1 { get; set; } 
private bool DoUpdate_2 { get; set; } 
private void OnClick_Update_1()
{
DoUpdate_1 = true;

}
private void OnClick_Update_2()
{
DoUpdate_2 = true;

}
}