javascript - reactjs如何使用百度分享这样的外部插件？

问题描述

问 题

类似这样在render中加载js，似乎没有执行

var Comment = React.createClass({
  rawMarkup: function() {
    var md = new Remarkable();
    var rawMarkup = md.render(this.props.children.toString());
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
        <div class="list-main-left-hover bdsharebuttonbox" data-tag="share_1">
            <span class="list-main-left-hovertit" href="javascript:;"></span>
            <a class="bds_weixin" data-cmd="weixin" href="javascript:;">微信朋友圈</a>
            <a class="bds_tsina" data-cmd="tsina" href="javascript:;">QQ空间</a>
            <a class="bds_qzone" data-cmd="qzone" href="javascript:;">微博</a>
        </div>
        <script src="http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=408841" type="text/javascript" />
      </div>
    );
  }
});

解决方案

这样在div里加script，感觉好奇怪，试了下似乎是没发请求- -，
我觉得这种一次加载的脚本，要么是页面直接写上引入，
要么在componentDidMount之类的方法动态引入。如：

//省略
componentDidMount: function() {
        var script = document.createElement('script');
        script.src = "http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=408841";
        document.body.appendChild(script);
        
    },
//省略

这篇关于javascript - reactjs如何使用百度分享这样的外部插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！