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应用中使用。

预先感谢

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

只需在var x = 1; while (x <= 20) { if (x % 3 === 0 && x % 5 === 0) { console.log("JuliaJames"); } else if (x % 5 === 0) { console.log("James"); } else if (x % 3 === 0) { console.log("Julia"); } else { console.log(x); } x++; }生命周期运行MediumWidget.Init代码，或使用componentDidMount钩子即可运行它。

Answer 3

在您的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() {
        try {
          
          var widget = document.getElementById("medium-widget");
          if (!!widget) {
            window.mediumWidget();
          }
        }
        catch(e){
          window.location.reload();
        }
      }
    return (<div id="medium-widget" ></div>)

如果您的React应用程序中有多个页面，并且每个页面都使用了history.push（），那么当您返回呈现中型窗口小部件的页面时，就会出错。

因此，我添加了try-catch。我们需要检查中等窗口小部件是否已加载。如果介质加载失败，页面将再次重新加载。

Answer 4

我稍微深入了一下代码，找到了一种用于卸载窗口小部件的方法。结果：

 useEffect(() => {
    window.MediumWidget.Init(widgetParams);
    return () => {
      window.MediumWidget.unmount();
    };
  }, []);

unmount()方法也可以在ComponentWillUnmount中调用。

我如何在React网站中使用中型窗口小部件

4 个答案: