在Blazor中，从子组件调用render，使父组件包含子组件

Question

在Blazor中有任何方法可以获得对其渲染内容的引用吗？这是一个想法。如果组件B(子级(继承了a(父级(，我是否可以从B获得BuildRenderTree的结果，以便在a上用作ChildContent？

背景我有一个可路由的组件Z，它看起来像下面的

@page "foo"
<B />

预期的结果是，假设两个组件都呈现div。2为内div，A为外CCD_。

<div>
<div></div>
</div>

有些人可能建议手动进行，但的想法恰恰相反

Answer 1

这并不是你想要的答案，但作为你能做什么的例子，它仍然很有趣，也许它会让你思考。

成分A

@RFA(@<text></text>)
@code
{
internal RenderFragment<RenderFragment> RFA = rfChild => @<div><h1>A</h1>@rfChild</div>;
}

第1行：@RFA(@<text></text>)-如果你在应用程序中使用组件A，它将只呈现自己的内容(<text></text>是一个空片段(

第4行：将RFA声明为接受另一个RenderFragment作为输入的RenderFraction。它将呈现自己的内容和子内容rfChild——在本例中是div的子内容(我至少引用了您的部分问题！(

使用组件A的输出

<div>
<h1>A</h1>
</div>

组分B

@inherits A
@RFA(@<div><h1>B</h1></div>)

第1行：从A继承(哦，这是你问题的第二部分(

第2行：将继承的RenderFragment(RFA(添加到此组件的输出中，并传入要在A的标记中呈现的组件B特定标记。

使用组件B的输出

<div>
<h1>A</h1>
<div>
<h1>B</h1>
</div>
</div>

试试看：BlazorRepl

Answer 2

这不是答案。。。这是一条评论(我所有的答案都是以评论的形式给出的(

你看到这个代码了吗：

@test(121)
@code {

private RenderFragment<int> test => (value) => (__builder) =>
{
__builder.OpenComponent<TemplatedComponent>(0);
__builder.AddAttribute(1, "Ref", value);
__builder.AddAttribute(2, "IntChildContent", 
(RenderFragment<int>)((context) => (__builder2) =>
{
__builder2.OpenElement(3, "p");
__builder2.AddContent(4, context);
__builder2.CloseElement();
}
));
__builder.CloseComponent();
};
}

全应答

如您所见，第二个RenderTreeBuilder(__builder2(的结果被添加为第一个名为__builder的RenderTreeBuilder的IntChildContent属性的值。在您的情况下，您可以更改__builder2以创建您的Child组件，并将其作为ChildContent属性添加到第一个构建器中，类似于以下内容：

__builder.AddAttribute(<sequence>, "ChildContent", <...>);

如果这不是你真正想要的，至少这个代码示例可以启发你如何操作树生成器，以复杂优雅的方式构建组件。

Answer 3

在Blazor中有什么方法可以获得对它的引用吗渲染？

您可以使用@ref属性来获取对"正在渲染"的组件的引用：

<MyComponent @ref=@MyCompRef />
@code {
MyComponent MyCompRef;
}

拥有一个组件B(子(继承了a(父(

没有，但如果你想把B放在布局中，那么你可以使用布局指令：

@inherits LayoutComponentBase
<div>I am the LayoutA</div>
<div>The child will be rendered where Body appears below</div>
<div>
@Body
</div>

并使用布局：

@layout LayoutA
<div>I am component B and will appear inside LayoutA</div>

我可以从B获得BuildRenderTree的结果吗？这样我就可以用作ChildContent上的A？

您可以使用模板组件：

组件A:

<div>Component A Header<div>
<div>
@ChildContent
</div>
@code {
[Parameter] public RenderFragment ChildContent { get; set; }
}

然后在组件Z中，您可以将组件B放入A:中

<ComponentA>
<ComponentB />
</ComponentA>