使经典javascript第三方应用程序在现有react/node应用程序中工作

我已经在react/node中内置了一个视频聊天应用程序

我正在尝试添加一个功能，打开视频聊天参与者可以使用的共享白板

我做了一些研究，AwwApp是我最喜欢的共享白板功能

AwwApp没有特定的代码示例或模块。然而，它们确实提供了一个简单的小部件，它使用宿主的.js文件

我试图在我现有的react应用程序中实现这个经典的javascript小部件，但遇到了一些问题——可能是因为我缺少一些简单的东西

下面是简单的AwwApp快速入门，其中包含js文件，以及如何以经典方式调用它：

以下是我的“AwwBoard.js”文件中的代码，我正在使用该文件创建一个组件，该组件将白板呈现在我想要导入的任何位置，并在react中返回：

import React, { Component } from 'react';
import Cookies from 'universal-cookie';
import Script from 'react-load-script'

// Get cookie for meeting room that this whiteboard instance will appear in.  Will be used after I get whiteboard working.
const cookieMgr = new Cookies();
const room = cookieMgr.get('room');

// The main AwwApp external javascript file to include, I use react-load-script to load it below
const awwAppScript = 'https://awwapp.com/static/widget/js/aww3.min.js';

// Create a React component I can display using <AwwBoard /> anywhere I want a whieboard to appear
class AwwBoard extends Component {
    handleScriptCreate() {
        this.setState({ scriptLoaded: false });
    };

    handleScriptError() {
        this.setState({ scriptError: true });
    };

    handleScriptLoad() {
        this.setState({ scriptLoaded: true });
    };

    // Function I created to render the board. Per https://awwapp.com/apis/V2/docs/ - should embed the whiteboard widget in the div with id aww-wrapper below
    handleBoardRender() {
        var aww = new AwwBoard('#aww-wrapper', {
        });

        return aww;
    };

    render() {
        return (

            <div id="aww-wrapper">
                <Script
                    url={awwAppScript}
                    onCreate={this.handleScriptCreate.bind(this)}
                    onError={this.handleScriptError.bind(this)}
                    onLoad={this.handleScriptLoad.bind(this)}
                />

                {this.handleBoardRender()}

            </div>    
        )
    };
};


export default AwwBoard;

import React，{Component}来自'React'；
从“通用cookie”导入cookie；
从“反应加载脚本”导入脚本
//获取此白板实例将出现在其中的会议室的cookie。将使用后，我得到白板工作。
const cookieMgr=新Cookies（）；
const room=cookieMgr.get（'room'）；
//要包含的主要AwwApp外部javascript文件，我使用react load脚本在下面加载它
常量awwAppScript=https://awwapp.com/static/widget/js/aww3.min.js';
//创建一个React组件，我可以使用任何我想要的whieboard显示的地方来显示它
类AwwBoard扩展组件{
handleScriptCreate（）{
this.setState（{scriptLoaded:false}）；
};
handleScriptError（）{
this.setState（{scriptError:true}）；
};
handleScriptLoad（）{
this.setState（{scriptLoaded:true}）；
};
//我创建的用于呈现电路板的函数https://awwapp.com/apis/V2/docs/ -应该在下面id为aww包装的div中嵌入白板小部件
车把板{
var aww=新aww板（“#aww包装器”{
});
返回aww；
};
render（）{
返回(
{this.handleBoardRender（）}
)
};
};
导出默认AwwBoard；

任何指导都将不胜感激。我相信有一个简单的方法可以做到这一点，我只是在做了一些我自己的尝试和错误之后没有看到它

---

谢谢

您需要创建一个包装器组件，它将3p组件添加到页面并调解控制消息。当包装器组件呈现时，它将在其呈现部分添加3p组件，并使用提供的道具或状态对其进行配置。如果它是基于JS的，您的react组件充当锚定，而您的组件作为启动器装载！这在概念上是有意义的，只是不清楚具体如何做。介意给一个代码示例吗？google地图现在作为react应用程序受到支持，但有一段时间它不受支持。在pre-react版本中有许多使用此技术的示例。这是我将采取的方法。这里有一个这样的例子：注意容器（包装器组件）是如何有一个div的，这是3p应用程序绑定到DOM的地方-让我知道你的进展。这正是我想要的。非常感谢。您需要创建一个包装器组件，它将3p组件添加到页面并调解控制消息。当包装器组件呈现时，它将在其呈现部分添加3p组件，并使用提供的道具或状态对其进行配置。如果它是基于JS的，您的react组件充当锚定，而您的组件作为启动器装载！这在概念上是有意义的，只是不清楚具体如何做。介意给一个代码示例吗？google地图现在作为react应用程序受到支持，但有一段时间它不受支持。在pre-react版本中有许多使用此技术的示例。这是我将采取的方法。这里有一个这样的例子：注意容器（包装器组件）是如何有一个div的，这是3p应用程序绑定到DOM的地方-让我知道你的进展。这正是我想要的。非常感谢。