通用的RenderFragment不允许参数

Question

我创建了一个以PopupFormAvatar组件为参数的组件PopupForm

[Parameter]
public RenderFragment PopupFormAvatar { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }

PopupFormAvatar也接受多个参数。

[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public string Text { get; set; }

我想这样使用

<PopupForm Model="model" OnValidSubmit="OnValidSubmit" Setting="popupFormSettings">
<PopupFormAvatar Text="asdad">
<CustomerImage></CustomerImage> // as ChildContent
</PopupFormAvatar>
<ChildContent>
Other content goes here
</ChildContent>
</PopupForm>

抛出错误Unrecognized attribute Text on child content element PopupFormAvatar

如果在我的弹出式组件，如果我只采取一个参数作为ChildContent它的工作，但我想要PopupFormAvatar和other content分别

[Parameter]
public RenderFragment ChildContent { get; set; } // instead of PopupFormAvatar 

或者放在ChildContent

中

<PopupForm Model="model" OnValidSubmit="OnValidSubmit" Setting="popupFormSettings">
<ChildContent>
<PopupFormAvatar Text="asdad">
<CustomerImage></CustomerImage> // as ChildContent
</PopupFormAvatar>
</ChildContent>

</PopupForm>

Answer 1

您的主要困惑点是可以理解的:问题是，当您使用像<PopupFormAvatar>这样的语法时，它在某些上下文中是模糊的。在您的例子中，您试图使用元素名称(PopupFormAvatar)来引用属性。所以你告诉PopupForm对于名为PopupFormAvatar的属性使用这个特定的片段。这由以下代码表示:

<PopupFormAvatar Text="asdad">
<CustomerImage></CustomerImage> // as ChildContent
</PopupFormAvatar>

这里有一个问题:虽然大多数时候在Blazor中，语法<PopupFormAvatar>将引用组件，但在这种情况下，它确实不是引用组件。它引用了PopupForm的一个属性，该属性将PopupFormAvatar属性声明为渲染片段。这意味着你在这里并没有对实际的PopupFormAvatar组件做任何事情——组件存在的事实是完全不相关的;名称PopupFormAvatar只是属性的名称，而且它还匹配一个组件，这是一个令人不快的巧合。

这就是为什么你得到错误，Unrecognized attribute Text on child content element PopupFormAvatar。因为该属性只被组件识别，而该组件尚未被征召。

要使此工作，您只需识别所有这些并提供实际的组件:

<PopupFormAvatar>
<PopupFormAvatar Text="Hello World">
asdfasdfas
</PopupFormAvatar>
</PopupFormAvatar>

注意作为元素的PopupFormAvatar的重复。第一件事是登记入住。后者提供实际的内容。这就是为什么可以分配Text属性——嵌套版本实际上是在使用您的Blazor组件(而不是引用该属性)。