我有一个模板组件(工具提示),它有一个参数,并将该参数作为上下文传递给子内容。该参数是ElementReference
的包装器。其目的是在子元素引用被设置后,将子元素的引用传回到工具提示中。
我想要做的是将该工具提示组件的特定实例存储在多个位置中可重用的RenderFragment
中。
但是我遇到了错误:The name 'context' does not exists in the current context
。
这是原始问题,但它被证明是过于简单了。请转到第二个分隔线,其中示例更类似于我的情况。
这里有一个示例(不是那个工具提示,而是具有完全相同问题的简化代码)。
模板组件RenderFragTempl
:
@inherits ComponentBase
<span id="@(Ref)">
@IntChildContent(Ref)
</span>
@code {
[Parameter] public RenderFragment<int> IntChildContent { get; set; }
[Parameter] public int Ref { get; set; }
}
在Index.razor
中的调用:
@page "/"
@using BlazorServer.Pages.StackOverflow
<RenderFragTempl Ref="10">
<IntChildContent>
<p>@context</p>
</IntChildContent>
</RenderFragTempl>
<br />
@test
@code {
//compiler error CS0103: The name 'context' does not exist in the current context
private readonly RenderFragment test = @<RenderFragTempl Ref="10001">
<IntChildContent>
<p>@context</p>
</IntChildContent>
</RenderFragTempl>;
}
编辑:1
我有一个提示框组件,它有一个子元素。每当鼠标悬停在该子元素上时,提示框就会显示出来。但是提示框没有用任何东西包裹子元素。所以如果你查看源代码,你只会看到不带提示框任何指示的子内容。当鼠标悬停在子元素上时,提示框容器将被添加到页面底部,并位于该子元素正上方。这在Blazor中实现起来非常棘手,因为提示框需要引用子内容。但是引用是在填充参数之后建立的。因此,使用特殊的包装器来实现,Tooltip被构建为模板化组件。
因此,我使用的ElementReference
的包装器(MatBlazor提供):
public class TargetForwardRef
{
private ElementReference _current;
public ElementReference Current
{
get => _current;
set
{
Set(value);
//this is just for debugging purpose
Console.WriteLine($"Ref: {value.Id ?? "null"}");
}
}
public void Set(ElementReference value) => _current = value;
}
我的简化版 Tooltip
作为 RenderFragTempl
(仅包含重要部分)
@inherits ComponentBase
<span>
@UnboundChildContent(RefBack)
</span>
@code {
[Parameter] public RenderFragment<TargetForwardRef> UnboundChildContent { get; set; }
[Parameter] public TargetForwardRef RefBack { get; set; } = new TargetForwardRef();
}
我的index.razor
@page "/"
@*
//this is working, will printout to console `<span>` reference id, you will be
//able to find it once you go to source; I added this here for reference
*@
<RenderFragTempl>
<UnboundChildContent>
<span @ref="@context.Current">Span content</span>
</UnboundChildContent>
</RenderFragTempl>
<br/>
@test
@code {
//compiler error CS0103: The name 'context' does not exist in the current context
private readonly RenderFragment test =
@<RenderFragTempl>
<UnboundChildContent>
<span @ref="@context.Current">Hover to show tooltip</span >
</UnboundChildContent>
</RenderFragTempl>;
}
为了回答这个问题——为什么我试图使用
RenderFragment
——想象一下我有一系列的卡片——假设是150张。卡片组件接受一个类型为IList<RenderFragment>
的参数,用于在卡片上呈现按钮。我想把我的带有工具提示的图标传递给那张卡片。我需要访问工具提示的上下文。我尝试将上下文的名称更改为其他名称,但我得到了同样的错误(除了错误信息中出现了新的上下文名称)。