Question

我有一个由第三方开发的聊天组件脚本，可以选择将其包含在包含以下代码的网站中：

<script type="text/javascript">
  var Comm100API=Comm100API||{};(function(t){function e(e){var a=document.createElement("script"),c=document.getElementsByTagName("script")[0];a.type="text/javascript",a.async=!0,a.src=e+t.site_id,c.parentNode.insertBefore(a,c)}t.chat_buttons=t.chat_buttons||[],t.chat_buttons.push({code_plan:147,div_id:"comm100-button-147"}),t.site_id=228642,t.main_code_plan=147,e("https://chatserver.comm100.com/livechat.ashx?siteId="),setTimeout(function(){t.loaded||e("https://hostedmax.comm100.com/chatserver/livechat.ashx?siteId=")},5e3)})(Comm100API||{})
</script>

以这种方式合并了一个可点击的弹出窗口，当按下该按钮时会打开聊天窗口。

我们的想法是将其添加到已经存在的被动应用程序中是在它的一个组成部分内构建的。

如果我们在应用程序的index.html中添加代码，弹出窗口将嵌套在应用程序的主体中，占据屏幕上的固定位置。

我们需要在此组件上插入聊天视图，并且不知道该怎么做：

interface Props {
  showVideoChat: false,
}

class VideoChatActionsPane extends React.Component<Props, {}> {
  render() {

    if (this.props.showVideoChat) {
      return (
          <div className="wdrgy-videoChat-menu">
            <div className="wdrgy-wc-header-videochat">
              <div className="wdrgy-brand">
                <span className="wdrgy-title">Title</span>
              </div>
            </div>
            <div>
              { // Chat component should be inserted here
              }
            </div>
          </div>
      );
    }
    return null;
  }
}

提前感谢您的帮助！

Answer 1

迟到总比没有好：

您可以使用React Helmet将脚本添加到文档的head部分，如下所示：

<Helmet>
    <script type="text/javascript">
        var Comm100API = Comm100API || {};
        (function(t) {
        ...
        })(Comm100API || {})
    </script>
</Helmet>

然后只需添加带反应的div：

<div id="comm100-button-xxxx"></div>

在反应组件

1 个答案: