首页 > 解决方案 > ReferenceError:在初始化之前无法访问“$zoho”——reactjs 组件

问题描述

我正在尝试将来自 zoho chat 的一些 js 添加到它自己的反应模块中。

<script type="text/javascript">var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq || {widgetcode:"xxxxxxxxxxxxxxxxxxxxxxxxxxx", values:{},ready:function(){}};var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;s.src="https://salesiq.zoho.eu/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);d.write("<div id='zsiqwidget'></div>");</script>

我已经构建了这个组件,但是我收到了一个参考错误——“ReferenceError: Cannot access '$zoho' before initialization”

import React, { Component } from 'react';

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Button from '@material-ui/core/Button';

import parse from 'html-react-parser';

import './ZohoLiveChat.scss';

class ZohoLiveChat extends Component {


  componentDidMount () {

    let $zoho = $zoho || {};
    $zoho.salesiq = $zoho.salesiq || {widgetcode:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", values:{}, ready:function(){}};

    let  d= document;
    
    let s = d.createElement("script");
      s.type ="text/javascript";
      s.id ="zsiqscript";
      s.defer = true;
      s.src = "https://salesiq.zoho.eu/widget";
    
    let t = d.getElementsByTagName("script")[0];
      t.parentNode.insertBefore(s,t);

    d.write("<div id='zsiqwidget'></div>");

  }




  render() {
    return (
      <div className="common-block">
       ZOHO!!!!!!!!!!!!!
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
  };
}

function mapDispatchToProps(dispatch) {
 return bindActionCreators({  }, dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ZohoLiveChat));

我看过这个例子 - 但不确定它的实现方式

将脚本标签添加到 React/JSX

  const script = document.createElement("script");

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

标签: javascriptreactjs

解决方案


推荐阅读