从javascript/jquery与ReactJS组件交互

我有一个用经典HTML/CSS/jQuery编写的web应用程序。我正在写一个聊天覆盖图（类似于Facebook聊天覆盖图），它需要高度互动。我最初是用React编写的，但为了学习，我决定尝试用React重新编写，我只停留在一个特定的部分

我有一个名为

chatooverlay

的组件，它处理页面上应该显示的所有对话。我使用

id='chat-footer'

在一个div中呈现这个ChatOverlay，它只是覆盖页面的一个固定元素

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

---

使用Vue，在单击处理程序中，我可以轻松调用Vue函数，该函数可以在Vue的“环境”中执行某些操作，但我不确定如何在React中实现同样的效果。任何建议都将不胜感激。

ReactJs对事物的工作内容和工作方式进行了描述和明确说明。要在按钮上设置操作，应在定义按钮时设置操作，而不是在程序中的其他位置

<button className='chat-button' onClick={()=>{
    //I need to tell the react app to open another conversation
    props.openAnotherConversation()
} value='Open Convo' />

{
//我需要告诉react应用程序打开另一个对话
props.openAnotherConversation（）的
}value='Open conva'/>

---

如果您需要将按钮作为HTML对象进行类似HTMLDom的引用，也可以使用

ref={（node）=>{this.buttonRef=node}}

。

我也不太会做出反应。我认为您可以使用onClick属性来调用函数。像这样的。不过，我可能误解了你的问题，我可能完全错了。不管怎样，感恩节快乐

import React, { Component } from 'react'

class CHAT-OVERLAY extends Component {



    const myFunction = (event) => {
        // your function stuff
    }

    render(){
        return(
            <button 
                className='chat-button' 
                onClick={this.myFunction}
            > Chat Button 
            </ button>
        )
    }
}

export default CHAT-OVERLAY

import React，{Component}来自“React”
类CHAT-OVERLAY扩展组件{
常量myFunction=（事件）=>{
//你的功能材料
}
render（）{
返回(
聊天按钮
)
}
}
导出默认聊天覆盖

我通过以下操作解决了这个问题。我意识到ReactDOM.render实际上返回了ChatOverlay组件的一个实例，我可以从JS代码中的任何其他地方访问它。我不确定这是否是实现这一目标的最佳方式，但它似乎对我有效

const element = <ChatOverlay />;
let chatOverlay = ReactDOM.render(
    element,
    document.getElementById('chat-footer')
);

$('.chat-button').on('click', function(){
   chatOverlay.openChat()
});

const元素=；
让chatOverlay=ReactDOM.render(
元素，
document.getElementById（'chat-footer'）
);
$（'.chat button'）。在（'单击'，函数（）上）{
openChat（）
});

My按钮不由react呈现，因此语法不起作用。按钮在页面上完全分开。正如我提到的，90%的页面是经典的HTML/jQuery，它只是使用react的聊天覆盖。我找到了一个我已经发布的解决方案

const element = <ChatOverlay />;
let chatOverlay = ReactDOM.render(
    element,
    document.getElementById('chat-footer')
);

$('.chat-button').on('click', function(){
   chatOverlay.openChat()
});