Использовать внешнюю функцию скрипта в React?

Question

Я пытаюсь загрузить клиентский скрипт Twilio Video в проект React + Rails. В index.html у меня есть эти два внешних скриптов из Twilio:

<script src="https://media.twiliocdn.com/sdk/js/conversations/v0.13/twilio-conversations.min.js"></script> 

Я не могу понять, за жизнь мне, как получить доступ к Twilio от React компонента, так что я могу начать использовать этот скрипт в моем приложение. Должно быть, без проблем, не так ли?

Answer 1

Twilio доступна на глобальном масштабе, если вы включите его в качестве тега сценария в вашем index.html:

// 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

unminified twilio-conversations.js:

(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);