如何将JS SDK集成到ReactJS中？

问题描述

我正在尝试将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 App中使用以上内容

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

export default ChatApp;

解决方法

通常，您应该从中获取模板

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

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

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