如何将 JS SDK 集成到 ReactJS 中？答案

【问题标题】：How do I integrate JS SDK into ReactJS?如何将 JS SDK 集成到 ReactJS 中？
【发布时间】：2020-08-28 03:16:32
【问题描述】：

我正在尝试将 QuickBlox chat JS sample app 集成到 ReactJS 应用程序中。

JS 示例应用程序具有如下所示的 App.js 文件，它使用使用 underscore.js 的模板

App.js

function App(config) {
    this._config = config;
    // Elements
    this.page = document.querySelector('#page');
    this.userListConteiner = null;
    this.init(this._config);
    this.loading = true;
}

// Before start working with JS SDK you nead to init it.

App.prototype.init = function (config) {
    // Step 1. QB SDK initialization.
    QB.init(config.credentials.appId, config.credentials.authKey, config.credentials.authSecret, config.appConfig);
};

App.prototype.loadWelcomeTpl = function () {
    
    var content = document.querySelector('.j-content'),
        welcomeTpl = helpers.fillTemplate('tpl_welcome');
    
    helpers.clearView(content);
    content.innerHTML = welcomeTpl;
};

// QBconfig was loaded from QBconfig.js file
var app = new App(QBconfig);

index.html 中的模板

<script  type="text/template" id="tpl_welcome">
        <div class="content__title j-content__title j-welcome">
            Welcome to QuickBlox chat sample!
        </div>
        <div class="notifications j-notifications hidden"></div>
        <div class="content__inner j-content__inner">
            <div class="welcome__message">
                <p>Please select you opponent to start chatting.</p>
            </div>
        </div>
    </script>

如何在我的 React 应用中使用上述内容

const ChatApp = () => {
    
    return (
        
    );
}

export default ChatApp;

【问题讨论】：

标签： javascript reactjs underscore.js

【解决方案1】：

通常你应该从

<script type="text/template">
...
</script>

并从您的组件中返回它。
当然你也应该在组件代码中实现业务代码（逻辑）。

您可以将整个示例拆分为几个小组件，例如 LoginContainer、LoginForm、Dashboard、WelcomeScreen 等...
好的起点是来自 QuickBlox 示例的脚本模板 - 每个模板都是一个 React 组件。

【讨论】：