如何在 ReactJs 组件中添加亚马逊广告脚本答案

【问题标题】：How can I add Amazon advertisement script Inside ReactJs component如何在 ReactJs 组件中添加亚马逊广告脚本
【发布时间】：2020-05-14 14:10:54
【问题描述】：

如何将脚本集成到特定位置的反应组件中，下面是显示添加的脚本，当我在w3schools上通过脚本时它可以工作

<div class="alignleft">
  <script type="text/javascript">
  amzn_assoc_ad_type = "banner";
    amzn_assoc_marketplace = "amazon";
    amzn_assoc_region = "US";
    amzn_assoc_placement = "assoc_banner_placement_default";
    amzn_assoc_campaigns = "kuft";
    amzn_assoc_banner_type = "category";
    amzn_assoc_p = "48";
    amzn_assoc_isresponsive = "false";
    amzn_assoc_banner_id = ID;
    amzn_assoc_width = "728";
    amzn_assoc_height = "90";
    amzn_assoc_tracking_id = "reater-20";
    amzn_assoc_linkid = amzn_assoc_linkid;
  </script>
  <script src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1"></script>
</div>

举例说明我喜欢做什么

var React = require('react');

var AmazoneAdd = React.createClass({
    render: function() {
        return (
            <div >
              functionality data goes here....
              ...
              <div className='advertisement'>
                Here want to display the addvertise....
              </div>
            </div>
        );
    }
});

module.exports = AmazoneAdd;

【问题讨论】：

标签： reactjs

【解决方案1】：

我已经解决了这样的问题，

var React = require('react');

var AmazoneAdd = React.createClass({
  amazoneScript: function() {
    return '<div class="alignleft"> <script type="text/javascript"> amzn_assoc_ad_type = "banner"; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "US"; amzn_assoc_placement = "assoc_banner_placement_default"; amzn_assoc_campaigns = "kuft"; amzn_assoc_banner_type = "category"; amzn_assoc_p = "48"; amzn_assoc_isresponsive = "false"; amzn_assoc_banner_id = ID; amzn_assoc_width = "728"; amzn_assoc_height = "90"; amzn_assoc_tracking_id = "reater-20"; amzn_assoc_linkid = "asoc_linked"; </script> <script src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1"></script> </div>'
  },
  render: function() {
    return (
      <div >
        functionality data goes here....
        ...
        <div className='advertisement'>
          <div dangerouslySetInnerHTML={{__html: this.amazoneScript()}}></div> 
        </div>
      </div>
    );
  }
});

module.exports = AmazoneAdd;

【讨论】：

【解决方案2】：

只需使用iframe 选项，效果很好。而且您不会永远留在 Amazon Associates

【讨论】：