构建依赖于第三方脚本的组件

Question

我正在使用react-async-script-loader来加载第三方聊天客户端，而我目前只是将其用作反应应用根的HOC。它有效，但它感觉不像React。

当前用法

import React, { Component, PropTypes, cloneElement } from 'react';
import scriptLoader from 'react-async-script-loader';

const App extends Component {

   render() {
       return <div>React App</div>;
   }
}

export default scriptLoader('https://livechaturl.com/keyvalue')(App);

我想如何使用它

import React, { Children, Component } from 'react';
import scriptLoader from 'react-async-script-loader';

const LiveChat extends Component {

   render() {
        return Children.only(this.props.children);
   }
}

export default scriptLoader(/* passed in value */)(LiveChat);


<LiveChat url="https://livechaturl.com/keyvalue">
    <App />
</LiveChat>

我不想像我目前在App组件中那样对URL进行硬编码，但我似乎无法找到关于如何将该prop值提供给react-async的HOC的答案-script装载机。

是否有其他方法可以使用我缺少的HOC？

Answer 1

使用这个特定的组件，我没有看到如何在构建时没有脚本。

我要做的也许是分叉并改变它以使用道具，例如here，将改为：

const scriptLoader = (WrappedComponent) => {
  // ...
 }

你会使用道具here

startLoadingScripts(this.props.scripts, err => {
  //...
}

由于我们删除了第一个arg，它将被实例化为

export default scriptLoader(App);