Blazor 自定义元素 - 在 React 中是否可以双向绑定和挂钩 EventCallback？

Question

我有一个 Blazor 组件，它具有双向绑定和附加的 EventCallback 属性。 当我在 Blazor 中使用此类组件时，一切正常。但是，我想在 React 或 Angular 中重用与自定义元素（Web 组件）相同的组件。

这是我尝试连接到 EventCallback 的方法：

Blazor方：

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

反应

function App() {

  const notificationElement = useRef();

  function messageReceivedListener(message){
    console.log(message);
  }

  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>
  );
}

尽管我肯定 Blazor 组件调用了 MessageReceived 事件，但我无法在 React 代码中接收它。

Answer 1

在这种采用 2 种不同 web 技术的方法中，我建议您使用自定义事件

https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events

从 Blazor 触发一个事件（使用 JSInterop），然后从 React 组件监听它。

反之亦然。

希望微软出一个更直接的Blazor与React通信的解决方案