Загрузите скрипт amazon в компонент реакции

У меня есть скрипт ниже в моем компоненте реакции, который работает, когда я обновляю компонент. Но когда я перемещаюсь между маршрутами, это не работает.

import { inject, observer } from 'mobx-react'
import React from 'react'

@inject('store')
@observer
export default class Ads extends React.Component<{}> {
  public componentDidMount() {
    const div = document.createElement('div')
    div.id = 'amzn_assoc_ad_div_adunit0_0'
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US`
    const s = document.createElement('script')
    s.type = 'text/javascript'
    const code = `amzn_assoc_placement = "adunit0"; 
    amzn_assoc_tracking_id = "teamhansel-20";
    amzn_assoc_ad_mode = "search";
    amzn_assoc_ad_type = "smart";
    amzn_assoc_marketplace = "amazon";
    amzn_assoc_region = "US";
    amzn_assoc_default_search_phrase = "Search Amazon For Cash Back";
    amzn_assoc_default_category = "All";
    amzn_assoc_linkid = "";
    amzn_assoc_search_bar = "true";
    amzn_assoc_search_bar_position = "top";
    amzn_assoc_title = "Shop Related Products"`  
    s.appendChild(document.createTextNode(code))
    const dom = document.getElementById('amazon-search-container')
    if (dom) {
      dom.appendChild(s)
      dom.appendChild(script)
    }
  }

  public render() {
    return (
      <div key = {Math.random()}>
        <div className = "mt-3 item__wrapper" id = "amazon-ads-container"> 
          <div id = "amazon-search-container">&nbsp;</div>
          <div id = "amzn_assoc_ad_div_adunit0_0">&nbsp;</div>
        </div>  
      </div>
    )
  }
} 

Вы можете просто настроить реактивный проект и попробовать это... пожалуйста!!!

Спасибо!!!

Можете ли вы показать свою настройку маршрута. Предпочтительный способ отображения рекламного компонента

Shubham Khatri 14.02.2019 11:57

Здесь вы можете чекroutes.js. Но я не думаю, что в этом есть какая-то проблема.

Profer 14.02.2019 12:06

Можете ли вы убедиться, что компонент Ads перемонтируется при изменении маршрута, а не перерисовывается?

Shubham Khatri 14.02.2019 12:16

Да, я уверен. Вы можете просто сделать небольшую настройку реакции и проверить ее. Он будет работать при обновлении, но не при навигации между маршрутами.

Profer 14.02.2019 12:20

@ShubhamKhatri Вот полная рабочий пример codeandbox.io/s/yl90q4r31

Profer 14.02.2019 12:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
328
0

Другие вопросы по теме