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组件进行交互。例如，我可能在用户的个人资料上有一个按钮，上面写着“聊天”。例如，请考虑以下jquery单击事件处理程序：

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

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

Answer 1

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

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

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

Answer 2

ReactJs是描述性的，明确的是什么以及如何运作。要在按钮上设置操作，应在定义按钮时设置操作，而不是在程序中的其他位置设置。

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

如果您需要像HTML对象那样对按钮进行HTMLDom引用，也可以使用ref={(node)=>{this.buttonRef=node}}。

Answer 3

我对React也很陌生。我认为你使用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

从javascript / jquery与ReactJS组件交互

3 个答案: