javascript/jqueryのReactJSコンポーネントとのやりとり

Question

私は古典的なHTML/CSS/jQueryで書かれたWebアプリケーションを持っています。私は非常にインタラクティブである必要がある（Facebookのチャットオーバーレイに似た）チャットオーバーレイを書いています。私は最初にVueを使ってこれを書いていましたが、学習目的でReactを使って書き直すことにしました。そして、私はある特定の部分で立ち往生しています。

私はChatOverlayというコンポーネントを持っています。このコンポーネントは、ページに表示されるすべての会話を処理します。このChatOverlayをid='chat-footer'のdivにレンダリングします。これは、ページにオーバーレイする固定要素です。

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

しかし、「環境」の外から反応コンポーネントとやりとりする方法はわかりません。たとえば、ユーザーのプロフィールに「チャット」というボタンが表示されている可能性があります。たとえば、次のjQueryのクリックイベントハンドラを検討：Vueので

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

を、クリックハンドラで、私は簡単しかし、私はわからないんだけど、Vueの者の「環境」でのいくつかのアクションを実行することができVueの関数を呼び出すことができますReactで同じことを達成する方法。アドバイスをいただければ幸いです。

Answer 1

これを解決するには、以下の手順を実行しました。 ReactDOM.renderが実際にJSOコード内のどこからでもアクセスできるChatOverlayコンポーネントのインスタンスを実際に返していることに気付きました。私はこれを達成するための最良の方法であるかどうかは分かりませんが、それは私にとってはうまくいくようです。

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

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

Answer 2

ReactJは、何がどのように機能するかを記述的かつ明示的に表しています。ボタンにアクションを設定するには、ボタンを定義するときにアクションを設定する必要があります。

<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

私はリアクションにもかなり新しいです。私はあなたが関数を呼び出すためにonClickプロパティを使用すると思います。このようなもの。私はあなたの質問を誤解しているかもしれません、そして、私はちょうど間違っていないかもしれません。いずれにせよ、感謝祭ハッピー。