在 React 中使用外部脚本函数？答案

【问题标题】：Utilize external script function in React?在 React 中使用外部脚本函数？
【发布时间】：2016-11-12 06:32:00
【问题描述】：

我正在尝试将 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，以便我可以开始在我的应用程序中使用这个脚本。一定是不费吹灰之力吧？

【问题讨论】：

你在使用 webpack 吗？或者类似的东西？

标签： javascript ruby-on-rails reactjs twilio

【解决方案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);

【讨论】：