在react中移动页面后，Amazon Affiliate不会进行渲染

Question

我想用搜索广告。

因此，当组件确实安装了append脚本时，以及当它将卸载时，删除它们

但是我正在为改变页面问题而挣扎

更改页面不会呈现我的代销商广告，但会返回错误(GetBoundcingClientRect)

​

当我刷新页面时，我就可以看到我的广告了。

我在amazon affiliate search ad script: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null上查到了这篇文章

但是我不能在我的项目中使用postscribe，这是一个依赖问题

下面是我的react组件代码

import React, { Component } from 'react';
import { connect }          from 'react-redux';
import { getLocale }        from '../../selectors/session';

function mapStateToProps (state, { concerts }) {
  return {
    artist: state.artist.artist,
    locale: getLocale(state),
  };
}

@connect(mapStateToProps)
export default class AffiliateContainer extends Component {
  componentDidMount () {
    this.appendScript()
  }

  componentWillUnmount() {
    this.removeScript()
  }

  appendScript(){
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US`
    script.id = 'amazon-affiliate'
    script.async = true
    const s = document.createElement('script')
    s.type = 'text/javascript'
    s.id = 'amazon-affiliate2'
    s.async = true
    const code = `amzn_assoc_placement = "adunit0"; amzn_assoc_tracking_id = "trackingID"; amzn_assoc_search_bar = "false"; amzn_assoc_ad_mode = "search"; amzn_assoc_ad_type = "smart"; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "US"; amzn_assoc_default_search_phrase = "kpop, ${this.props.artist?.groups?.length > 0 ? `${this.props.artist.name}, ${this.props.artist.groups[0].name}` : this.props.artist.name}"; amzn_assoc_default_category = "All"; amzn_assoc_linkid = "linkID"; amzn_assoc_title = "Shop Related Products";`
    s.appendChild(document.createTextNode(code))

    const dom = document.getElementById('amazon-search-container')
    const ad = document.getElementsByClassName('amzn-native-container')

    if(dom && !ad.length > 0) {
      dom.appendChild(s)
      dom.appendChild(script)
    }
  }

  removeScript(){
    const dom = document.getElementById('amazon-search-container')
    const script1 = document.getElementById('amazon-affiliate')
    const script2 = document.getElementById('amazon-affiliate2')
    if(dom){
      dom.removeChild(script1)
      dom.removeChild(script2)
    }
  }

  render() {
    return (
      <div className="contents-wrap">
        <div id="amazon-search-container">
          <div id="amzn_assoc_ad_div_adunit0_0"/>
        </div>
      </div>
    );
  }
}

Answer 1

我发现它会在第一次和下一次呈现amzn_assoc_ad_div_adunit0_0、adunit0_1、adunit0_2等等。

这是我在亚马逊网页上找到的

​

有一个div_name参数，所以我添加了amzn_assoc_div_name = "amzn_assoc_ad_div_adunit0_0"，它可以正常工作