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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在React网站中使用媒体小部件相关的知识,希望对你有一定的参考价值。

我找到了一个惊人的链接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>

结果应该是这样的

enter image description here

我如何在React网站中使用该代码?

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

提前致谢

答案

在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>);
}
另一答案

只需在MediumWidget.Init生命周期运行componentDidMount代码或使用useEffect钩子运行它。

以上是关于如何在React网站中使用媒体小部件的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React 组件中使用 TradingView 小部件?

Android小部件,启动一个片段?

此应用小部件片段中所有意图 (PendingIntents) 的逻辑流

带有媒体上传按钮的自定义Wordpress窗口小部件,在每个窗口小部件上插入相同的图像

如何更新导航抽屉中的有状态小部件,同时在 Android 中保持与片段相同的类?

如何在其他网站上嵌入 React 组件?