3
votes

Comment puis-je utiliser un widget moyen dans un site Web React

J'ai trouvé un lien incroyable Ici qui crée un widget pour le Medium code > messages.

Malheureusement, je n'ai pas pu utiliser le code dans un site Web react

  exemple (Un auteur de support aléatoire): 
 <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>
  Le résultat devrait ressembler à ceci 
     
  Comment puis-je utiliser le code dans le site Web React? 
  J'ai également trouvé une version angulaire de ce  ici 
mais n'a pas pu utiliser l'application React. 
  Merci d'avance

javascript reactjs angularjs

0 commentaires

4 Réponses :

1
votes

exécutez simplement le code MediumWidget.Init au cycle de vie de componentDidMount ou utilisez le hook useEffect pour l'exécuter.

0 commentaires

7
votes

Dans index.html

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

Dans votre composant

<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>

2 commentaires

Lorsque j'utilise componentWillMount (), j'ai une erreur et je passe à Did qui fonctionne maintenant. Je vous remercie. Aussi pourquoi j'en avais besoin pour changer

Oh oui, désolé. Je suis un peu fatigué. Vous devez donc appeler la fonction une fois le composant monté, car si vous le faites avant, le

n'existe pas encore dans le dom. Et le widget n'a pas de place pour apparaître

0
votes

Ajoutez le code ci-dessous dans votre index.html

    componentDidMount() {
        try {
          
          var widget = document.getElementById("medium-widget");
          if (!!widget) {
            window.mediumWidget();
          }
        }
        catch(e){
          window.location.reload();
        }
      }
    return (<div id="medium-widget" ></div>)

Ajoutez le code suivant dans votre composant.

<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>

Si vous avez plusieurs pages dans votre application react et si vous utilisez history.push () pour chaque page, alors lorsque vous revenez, la page qui rend le widget moyen donne une erreur.

Par conséquent, j'ajoute try-catch. nous devons vérifier si le widget moyen se charge ou non. Si le support ne parvient pas à se charger, la page se rechargera.

0 commentaires

0
votes

J'ai creusé un peu le code et j'ai trouvé une méthode à utiliser pour démonter le widget. Le résultat:

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

La méthode unmount () peut également être appelée dans ComponentWillUnmount si vous y êtes.

0 commentaires