在React中能否实现Blazor自定义元素的双向绑定与EventCallback挂钩？

问题根源 #

Blazor的EventCallback参数不会自动暴露为Custom Element的DOM事件，必须在Blazor组件内部手动触发对应的自定义DOM事件，外部的React/Angular才能捕获到。

解决方案步骤 #

1. 修改Blazor组件，手动触发自定义DOM事件

首先要在Blazor组件里注入IJSRuntime，并在触发MessageReceived的逻辑中，额外添加发送自定义DOM事件的代码（注意把C#元组转换成JS兼容的对象格式）：

@inject IJSRuntime JSRuntime

<!-- 给组件根元素添加引用，用于触发事件 -->
<div @ref="ComponentRef">
    <!-- 你的组件内容 -->
</div>

@code {
    [Parameter]
    public EventCallback<(long, string)> MessageReceived { get; set; }

    private ElementReference ComponentRef { get; set; }

    // 假设你在这个方法里触发MessageReceived
    private async Task TriggerMessage(long id, string content)
    {
        // 执行原有的EventCallback逻辑
        await MessageReceived.InvokeAsync((id, content));

        // 手动触发自定义DOM事件，把数据传给外部
        await JSRuntime.InvokeVoidAsync("window.dispatchComponentEvent", 
            ComponentRef, 
            "message-received", 
            new { Id = id, Content = content });
    }
}

然后在项目的wwwroot目录下添加全局JS方法（比如放在script.js里）：

window.dispatchComponentEvent = function(element, eventName, detailData) {
    const customEvent = new CustomEvent(eventName, {
        detail: detailData,
        bubbles: true,
        cancelable: true
    });
    element.dispatchEvent(customEvent);
};

2. 修正React端的事件监听逻辑

React中自定义事件的传递数据存在于event.detail属性中，你需要调整监听函数的逻辑，同时注意给useEffect添加空依赖数组避免重复绑定：

function App() {
  const notificationElement = useRef();

  function messageReceivedListener(event){
    // 从event.detail中获取Blazor传递的数据
    const { Id, Content } = event.detail;
    console.log(`收到消息：ID=${Id}，内容=${Content}`);
  }

  useEffect( () => {
    notificationElement.current.addEventListener('message-received', messageReceivedListener);

    return () => {
      notificationElement.current.removeEventListener('message-received', messageReceivedListener);
    }
  }, []); // 空依赖数组确保只绑定一次

  return (
    <div className="App">
          <notification-component ref={notificationElement}></notification-component>
    </div>
  );
}

关键注意事项 #

• C#元组类型无法直接传递给JS，必须转换成普通对象格式
• Blazor不会自动将EventCallback映射为DOM事件，必须手动调用JS API触发CustomEvent
• React中自定义事件的 payload 始终存储在event.detail中，不是事件参数本身

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