如何在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>
结果应该是这样的
我如何在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 小部件?
此应用小部件片段中所有意图 (PendingIntents) 的逻辑流
带有媒体上传按钮的自定义Wordpress窗口小部件,在每个窗口小部件上插入相同的图像