react（基于antd-pro）接入营销QQ

自身水平不高能力有限，本文指在实现功能。各位大神有更好的方法，请回复教授一下，尽可能详细哦。

普通的营销QQ调用方式

---

在原先的旧项目中，调用营销QQ（比较早之前的项目），只需要使用一句<script>代码，就可以实现包括点击按钮、跳转营销QQ等功能。

<div style="width: 100%;">
<!-- WPA Button Begin -->
  <h:outputLabel 
    value="在线咨询：" 
    style="font-size: 12px;line-height: 27px;position: relative;padding-left: 4px;"/>
  <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq.com/cgi/wpa.phpkey=Xzkz*******V8"></script>
<!-- WPA Button End -->
</div>

image.png

但是在react中，无法直接在jsx代码插入以上的js。因此只能使用另外一种方法，调用营销QQ。

<script charset="utf-8" src="http://wpa.b.qq.com/cgi/wpa.php"></script>

<div id="onlineService">    
    <a target="_blank" href="javascript:void(0)">
       <span>QQ沟通</span>
    </a>
</div>

<script>
     BizQQWPA.addCustom({
        aty: '0', //指定工号类型,0-自动分流，1-指定工号，2-指定分组
        nameAccount: '40096****68', //营销 QQ 号码
        selector: 'onlineService' //WPA 被放置的元素，与点击按钮同id
    });
</script>

在react中的实现

---

首先在react的index文件中引入js文件（上面代码的第一句），如果是antd-pro的话，index文件在src -- index.ejs

之后给营销QQ的点击按钮加上id（这里的按钮样式需要自己写）

最后在合适的位置加上最后一段js代码。（如果是在组件内使用，在组件componentDidMount时，加入运行js）