Blazor组件中如何将函数作为EventCallback变量传递

你现在的问题出在直接在Razor标记里实例化MyNestedComponentOne时，没法正确绑定页面的EventCallback上下文。EventCallback得依赖组件的渲染上下文才能保证回调正常触发，不能直接在标记里用new赋值方法引用。

解决方案步骤 #

• 不在Razor标记内直接new组件实例，而是在页面的@code块中初始化实例，并通过EventCallback.Factory.Create绑定当前页面的上下文。
• 在Razor标记里直接引用初始化好的实例即可。

修改后的页面代码 #

Razor部分

@page "/"
@using BlazorAppPlayground.Client.Components

<MyComponentWithRenderFragments
    SomeDataForComponent="Hello World"
    NestedComponentOneInfo="@_nestedComponentOneInfo"> 
    <NestedComponentOneTemplate>
        <MyNestedComponentOne
            SomeDataForNestedOne="@context.SomeDataForNestedOne"
            Callback="@context.Callback">
        </MyNestedComponentOne>
    </NestedComponentOneTemplate>
</MyComponentWithRenderFragments>


<!-- 这段代码可以正常运行，作为参考 -->
<BlazorAppPlayground.Client.Components.MyNestedComponentOne
    SomeDataForNestedOne="@callbackText"
    Callback="DoAThing">
</BlazorAppPlayground.Client.Components.MyNestedComponentOne>

@Code部分

@code {
    private string callbackText = "Callback test";
    private MyNestedComponentOne _nestedComponentOneInfo;

    protected override void OnInitialized()
    {
        // 初始化实例并绑定带上下文的EventCallback
        _nestedComponentOneInfo = new MyNestedComponentOne
        {
            SomeDataForNestedOne = "Testing",
            Callback = EventCallback.Factory.Create<string>(this, DoAThing)
        };
    }

    private async Task DoAThing(string data)
    {
        callbackText = data;
        StateHasChanged(); // 显式触发UI更新，确保回调后页面能刷新
    }
}

说明 #

• EventCallback.Factory.Create<string>(this, DoAThing)会把回调方法和当前页面组件的上下文绑定，确保子组件触发回调时能正确找到并执行DoAThing。
• 你的MyComponentWithRenderFragments和MyNestedComponentOne组件代码无需修改，保持原样即可正常工作。

内容的提问来源于stack exchange，提问作者BrianH