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

我一辈子都想不通如何从React组件访问Twilio，这样我就可以开始在我的应用程序中使用该脚本了。 必须不费吹灰之力，对吗？

Answer 1

如果将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

未缩小的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);