如何在 RenderFragment 中定义模板化组件及其可用的 @context

Question

我有一个模板化组件（工具提示），它有一个参数，并将上下文中的该参数传递给子内容。该参数是 的包装器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 中实现是相当有问题的，因为工具提示需要引用子内容。但引用是在参数填写后建立的。因此，使用特殊的包装器来实现这一点，并将工具提示构建为模板化组件。

所以我使用的包装器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>在卡片上呈现按钮的参数。我想将带有工具提示的图标传递给该卡。我需要访问工具提示的上下文。

我尝试将上下文重命名为其他名称，但出现相同的错误（除了错误中存在新的上下文名称）。

Answer 1

为什么要定义模板化组件并这样使用它？

但是，这里的代码示例演示了如何在不定义模板化组件的情况下获得相同的所需结果：

@test(12)

@code {
    
    private RenderFragment<int> test => (value) => (__builder) =>
    {
        <span id="@(value)">
            @value
        </span>
    };

}

但如果您坚持的话，这里是演示如何渲染组件的代码：

@test((10001, 15))

@code 
{
    private RenderFragment<(int, int)> test => (value) => (__builder) =>
    {
        <RenderFragTempl Ref="@value.Item1">
            <IntChildContent>
                <p>@value.Item2</p>
            </IntChildContent>
        </RenderFragTempl>;
   
    };

 }

更新：

以下代码描述了如何使用内部变量上下文渲染模板化组件。您可以根据需要对其进行改进。

注意：我没有阅读您的更新...我只是按照您对原始问题的要求进行操作，但这次使用上下文。

@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();

        };

}

请注意，当您调用 RenderFragment 委托时，您向其传递一个值，该值分配给 Ref 参数，并以内部上下文变量的形式传递