[英]Utilize external script function in React?
我正在嘗試將Twilio Video客戶端腳本加載到我的React + Rails項目中。 在index.html
我有來自Twilio的以下兩個外部腳本:
<script src="https://media.twiliocdn.com/sdk/js/conversations/v0.13/twilio-conversations.min.js"></script>
我一輩子都想不通如何從React組件訪問Twilio,這樣我就可以開始在我的應用程序中使用該腳本了。 必須不費吹灰之力,對嗎?
如果將Twilio作為腳本標記包含在index.html
則可以在全局范圍內訪問Twilio:
// App.js const App = (function(Component) { // mock imports class App extends Component { render() { // Twilio globally accessible return ( <pre> {Object.keys(Twilio.Conversations).join(', ')} </pre> ); } } return App; // mock expoort })(React.Component); // index.js (function(App, render) { // mock imports render(<App />, document.getElementById('app')); })(App, ReactDOM.render);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> <script src="//media.twiliocdn.com/sdk/js/conversations/v0.13/twilio-conversations.min.js"></script> <div id="app"></div>
也許更清楚的示例: http : //www.webpackbin.com/4JhaBpybf
(function(root) {
...
if (typeof define === 'function' && define.amd) {
define([], function() { return Conversations; });
} else {
var Twilio = root.Twilio = root.Twilio || {};
Twilio.Conversations = Twilio.Conversations || Conversations;
}
})(typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : this);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.