Как я могу использовать средний виджет на сайте React

Question

Я нашел одну из удивительных ссылок Здесь , которые создают виджет для Medium сообщений.

К сожалению, я не смог использовать код на примере react веб-сайта

(случайный автор среды):

<div id="medium-widget"></div>
    <script src="https://medium-widget.pixelpoint.io/widget.js"></script>
    <script>MediumWidget.Init({renderTo: '#medium-widget', params: {"resource":"https://medium.com/@sunilsandhu","postsPerLine":2,"limit":4,"picture":"big","fields":["description","author","claps","publishAt"],"ratio":"landscape"}})</script>

Результат должен быть таким

Как использовать код на веб-сайте React?

Также я нашел англоязычную версию этого здесь но не удалось использовать в приложении React.

Заранее спасибо

Answer 1

В index.html

<script src="https://medium-widget.pixelpoint.io/widget.js"></script>
<script type="text/javascript">
  function mediumWidget(){
    MediumWidget.Init({renderTo: '#medium-widget', params: {"resource":"https://medium.com/@sunilsandhu","postsPerLine":2,"limit":4,"picture":"big","fields":["description","author","claps","publishAt"],"ratio":"landscape"}});
  }
</script>

В вашем компоненте

componentDidMount() {
  window.mediumWidget();
}
render() {
  return (<div id="medium-widget"></div>);
}

Answer 2

просто запустите код MediumWidget.Init в жизненном цикле componentDidMount или используйте хук useEffect для его запуска.