通过javascript/jquery与ReactJS组件交互

Question

我有一个用经典的HTML/CSS/jQuery编写的web应用程序。我正在写一个聊天覆盖(类似于Facebook聊天覆盖)，这需要高度互动。我最初是使用Vue编写的，但出于学习的目的，我决定尝试使用React重写它，并且我被困在一个特定的部分。

我有一个名为ChatOverlay的组件，它处理应该在页面上显示的所有对话。我用id='chat-footer'在一个div中呈现这个ChatOverlay，它只是一个覆盖在页面上的固定元素。

const element = <ChatOverlay name="Testing" conversationId="a6b9bc89-b9ff-4eb1-86d8-ac5986fb5cbe"/>;
ReactDOM.render(
    element,
    document.getElementById('chat-footer')
);

然而，我不确定如何从React“环境”之外与react组件进行交互。例如，我可能在用户的个人资料上有一个按钮，上面写着“聊天”。例如，考虑以下jquery单击事件处理程序：

$('.chat-button').on('click', function(){
   //I need to tell the react app to open another conversation  
});

使用Vue，在点击处理程序中，我可以很容易地调用Vue函数，该函数可以在Vue的“环境”中执行一些操作，但是我不确定如何在React中实现相同的功能。任何建议都将不胜感激。