Попытка запустить виджет Ko-Fi внутри компонента React. Запуск <script>команд внутри DIV - PullRequest
Новая
       78

Попытка запустить виджет Ko-Fi внутри компонента React. Запуск <script>команд внутри DIV

1 голос
/ 10 марта 2020

Итак, вот скрипт, который мне нужно запустить, чтобы реализовать виджет Ko-Fi на моем сайте. 

<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
<script type='text/javascript'>
  kofiwidget2.init('Buy me a coffe!', '#3c807c', 'XXXXXXXXXX');
  kofiwidget2.draw();
</script>

Мой сайт представляет собой одностраничное приложение, созданное с помощью React, так что вот что я я делаю.

1 - Я переместил скрипт, который загружает widget_2.js в <head> моего index.html файла:

index. html

<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>

Должен ли я добавить async к этому тегу скрипта?

2 - я пытаюсь загрузить остальные внутри мой компонент React, но пока безуспешно:

Я пытался: 

// NOTE: IT'S DISPLAYING AS MULTI-LINE HERE JUST TO MAKE IR MORE READABLE
return(
  <div dangerouslySetInnerHTML={{__html: 
    "<script type='text/javascript'>
       kofiwidget2.init('Buy me a coffee!', '#3c807c', 'XXXXXXXXXX');
       kofiwidget2.draw();
     </script>"
  }}>
);

А также: 

return(
  <div>
    <script type="text/javascript">
      kofiwidget2.init("Buy me a coffee!", "#3c807c", "XXXXXXXXXX");
      kofiwidget2.draw();
    </script>
  </div>
);

И, похоже, ничего не происходит.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ:

Метод kofiwidget2.draw(); выполняет следующие действия: 

draw: function () {
  document.writeln(style + html.replace("[color]", color).replace("[text]", text).replace("[id]", id));
}

Используется метод document.writeln. Поэтому я думаю, что это должно быть выполнено именно там, где мне нужна кнопка для загрузки. Т.е.: внутри div.

SNIPPET (ПОПЫТКА, ЧТОБЫ ЗАПУСТИТЬ КОМАНДУ СКРИПТА ВНУТРИ РЕАКЦИИ) 

function App() {
  return(
    <script type="text/javascript">console.log('TEST_1');</script>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
...