无法制作嵌套组件

Posted 2023-03-27

【中文标题】无法制作嵌套组件

【英文标题】：Can't make nested components

【发布时间】：2020-11-27 12:28:58

【问题描述】：

抱歉，如果问题与我缺乏经验有关。我正在尝试制作一个组件库来处理来自 blazor 的地图框。现在我有一个主要组件 MapBoxView，它显示地图和 MapboxGeocoder，用于查找对象。每个组件在主组件 OnFirstAfterRenderAsync() 中都有一个过程：

protected async override Task OnFirstAfterRenderAsync()

    await base.OnFirstAfterRenderAsync();
    Dictionary<string, object> o = new Dictionary<string, object>();
    ...
    await JsInvokeAsync<object>("mapgl.mymap.initMap", o);

在嵌套组件中：

protected async override Task OnFirstAfterRenderAsync()

    await base.OnFirstAfterRenderAsync();
    Dictionary<string, object> o = new Dictionary<string, object>();
    o.Add("container", container);
    await JsInvokeAsync<object>("mapgl.mygeocoder.initGeocoder", o);

在演示程序中我使用代码：

@page "/"

<MapBoxView zoom=@_zoom container=@containerName mapCenter=@centerOfView>
</MapBoxView>

<MapBoxGeocoder Id="geocoder">
</MapBoxGeocoder>

然后一切正常，我得到了我想要的图片：

在演示程序中我使用代码：

<MapBoxView zoom=@_zoom container=@containerName mapCenter=@centerOfView>
    <MapBoxGeocoder Id="geocoder">
    </MapBoxGeocoder>
</MapBoxView>

也就是说，我把嵌套组件放在了main中，然后geocoder（左下角有文字的窗口-图片上的搜索）没有显示，程序也没有进入MapBoxGeocoder组件的OnFirstAfterRenderAsync()过程。 主组件 MapBoxView 有剃须刀代码：

@namespace MapBoxBlazor

@inherits BaseMapBoxView

    <div id='mapContainer'>
    </div>

我做错了什么？怎么做才对？

【参考方案1】：

您应该查看有关 ChildContent 的文档。

您需要使用名为ChildContent 的RenderFragment 来允许您渲染嵌套组件。

父组件必须有属性

public RenderFragment ChildContent  get; set; 

然后在你想要的地方渲染它。例如

<div> 
    @ChildContent
</div>

并且这个属性会渲染父组件内的所有东西。

所以对于你的情况，MapBoxView 应该有 ChildContent 并在里面渲染它才能工作。

【讨论】：

非常感谢。我知道这种方式。问题是，也许有一种方法可以处理“div”——在其中可以插入任意其他标签。虽然如果我知道 html 标签是如何实现的，那么显然这是不可能的。将其他标签放置在地图（地理编码器等）标签内会很舒服，而不会影响地图标签