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

Question

我正在使用react-async-script-loader加载第 3 方聊天客户端，我目前只是将其用作 React 应用程序根目录的 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 进行硬编码，但我似乎找不到如何向 React-async 的 HOC 提供该 prop 值的答案-脚本加载器。

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

Answer 1

对于这个特定的组件，我不知道如何在构建时没有脚本。

我可能会做的是 fork 它并将其更改为使用 Prop ，例如 here ，将更改为:

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

你会使用 Prop here

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

由于我们删除了第一个参数，它会像

一样被实例化

export default scriptLoader(App);