如何在React网站中使用媒体小部件

Question

我找到了一个惊人的链接Here，为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网站中使用该代码？

此外，我发现了这个here的Angular版本，但无法在React app中使用。

提前致谢

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钩子运行它。