React-Reduxコンポーネント関数をウィンドウオブジェクトにエクスポートする方法

Question

私はウィジェットチャットを表示するReact-reduxライブラリを構築しています。ライブラリはインターフェイスを提供する必要があります。クライアントはライブラリの状態を設定および理解し、ウィジェットをドキュメントにレンダリングできます。

私はWebpackをビルドプロセスに使用します。 私はTwilio-Chatライブラリをチャット機能に使用しています。

私のインデックスファイルは次のようになります。

Index.js

import MyChatWidget from 'components/MyChatWidget'; 
export default { 
widgets: { 
    MyChatWidget: { 
     render: (args) => { 
      ReactDOM.render(
       <MyChatWidget /> 
     ); 
     }, 
     logout:() => { 
     // this function should call a the logout in the MyChatWidget 
     // React Component 
     } 
    } 
} 

MyChatWidget

import Chat from 'twilio-chat'; 
class MyChatWidget extends Component { 
    logout() { 
     Chat.shutdown() 
    } 
} 

export default connect()(MyChatWidget); 

ログアウトがクライアントに公開され、それが機能を呼び出す必要がありますMyChatWidgetコンポーネントの内部にあります。

どうすればこの問題を解決できますか？ Twilio Chatを間違った場所（MyChatWidgetコンポーネント）に含めていますか？

私はあなたのindex.jsにMyChatWidget.logout()としてあなたはlogoutメソッドstaticを宣言し、そのメソッドにアクセスすることができますWebPACKの（https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4）

Answer 1

と建物のため、この記事を読んで

Answer 2

免責事項：私は巨大ではありませんよウィンドウのオブジェクトに何かを置くファン。特に、サーバーレンダリングを使用するとウィンドウが使用できないためです。しかし、あなたのクラスのインスタンスをwindowオブジェクトに渡すと、JSがwindowオブジェクトにアクセスできるところであればどこにでもアクセスできるようになります。

constructor() { super(); if (window) { window.mychatwidget = this; } }