SPFx - функция JavaScript не работает

Question

У меня есть компонент слайда, собранный в моем методе render() в моей веб-части, он отображается нормально, но действие Javascript "ShowSlide()", необходимое для активации слайда, не запускается внутри $().ready()

Я поместил звонок внутри

public render(): void {  
  this.domElement.innerHTML = `
      <!-- build the slide here -->
      <div>
         <ul>
            .....
            ..... shortened for brevity 
            .....
         </ul>
      </div>
      <!-- CALL THE SLIDE using $().ready() - it doesn't work -->
      <script type="text/javascript">
        $(document).ready( function() 
            ShowSlide();
        });
      </script>
  `;
} 

У меня закончились идеи, я не знаю, что мешает запуску функции, я добавил маленькую кнопку для вызова этой функции вручную, и она работает, когда она вызывается нажатием кнопки, но не на ожидаемую $().ready()

public render(): void {  
  this.domElement.innerHTML = `
      <!-- manual call for ShowSlide() -- it works when clicked! -->
      <input type="button" value="Start Slide" onClick="ShowSlide()"  />
      <!-- build the slide here -->
      <div>
         <ul>
            .....
            ..... shortened for brevity 
            .....
         </ul>
      </div>
      <!-- CALL THE SLIDE using $().ready() - it doesn't work -->
      <script type="text/javascript">
        $(document).ready( function()
            ShowSlide();
        });
      </script>
  `;
} 

Answer 1

Я нашел решение для моей проблемы! Я узнал о добавлении скрипта, создав элемент внутри HEAD, поэтому все, что мне нужно было сделать, это следующее:

  public render(): void {

    this.domElement.innerHTML = this.htmlContents;

    let head: any = document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";

    try {
        script.appendChild(document.createTextNode(this.htmlScript));
    } 
    catch (e) {
        script.text = this.htmlScript;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);               
  }

Я надеюсь, что это поможет любому, кто сталкивается с той же проблемой, занимало у меня 4 дня подряд на изучение, поиск в Google, чтение всего, что я мог, пока я не нашел статью в блоге о вызове функций Azure в SPFx, откуда я мог получить вдохновение для подключения очки и решить мою проблему!