recherche

Maison  >  Questions et réponses  >  le corps du texte

Méthode pour afficher les éléments enfants dans WebComponent

<p>J'essaie de reconstruire un composant React en WebComponent afin de me débarrasser de la dépendance à React. </p> <p>J'aimerais voir un WebComponent comme celui-ci en HTML : </p> <pre class="brush:php;toolbar:false;"><editable-h1>Bonjour tout le monde</editable-h1></pre> <p>Cela devrait ressembler à ceci :</p> <pre class="brush:php;toolbar:false;"><span> <h1>Bonjour tout le monde</h1> <button onClick=this.onEdit>Modifier</button> </span></pre> <p>Si je clique sur le bouton Modifier, je souhaite qu'il apparaisse comme ceci : </p> <pre class="brush:php;toolbar:false;"><form> <input type='text' value='Bonjour tout le monde'></input> <button onClick=this.onSave>Enregistrer</button> </form></pre> <p>Cliquer sur le bouton Enregistrer enregistrera les modifications apportées à la base de données via un appel API et reviendra au rendu d'origine (mais avec le texte déjà modifié). </p> <p>Je pense que je peux gérer le changement de rendu et les appels d'API, mais ce qui me rend confus, c'est comment obtenir le texte de l'élément enfant "Bonjour tout le monde" à partir du composant Web initial afin d'effectuer le rendu. </p>
P粉514001887P粉514001887545 Il y a quelques jours566

répondre à tous(1)je répondrai

  • P粉094351878

    P粉0943518782023-09-05 00:37:47

    Tags ouverts sur <editable-h1>上触发connectedCallbackévénements

    Donc, le Hello WorldinnerHTML de votre n'a pas encore été analysé

    Pour attendre que l'analyse soit terminée avant de l'exécuter, utilisez setTimeout

    REMARQUE : Tout est fourni parsedCallback的工具和库都会在底层使用类似的技巧,使用requestAnimationFrameMutationObserver (et plus de lignes de code).

    Si vous pensez qu'une ligne setTimeout是一个hack,或者你不想使用setTimeout est un hack, ou si vous ne voulez pas perdre cette milliseconde en utilisant , vous pouvez consulter le code d'élément html-parsed d'Andrea Giamarchi

    (Bien sûr, cela nécessite un chargement et une analyse, ce qui augmente également les dépendances et la complexité du code, donc cela prend globalement plus de temps)


    Et suivez les experts WC, cette discussion continue : Besoin d'une fonction de rappel à exécuter une fois l'élément enfant modifié ou l'analyse terminée https://github.com/WICG/webcomponents/issues/809

    Toutes les méthodes se résument au même objectif : Attendre que la boucle d'événement soit vide

    Qu'est-ce que la boucle événementielle ? https://www.youtube.com/watch?v=8aGhZQkoFbQ

    customElements.define("editable-h1", class extends HTMLElement {
      connectedCallback() {
        setTimeout(() => {
          this.innerHTML = `<h1>${this.innerHTML}</h1><button>Edit</button>`;
          
          let h1     = this.querySelector("h1");
          let button = this.querySelector("button");
          
          button.onclick = (evt) => {
            button.innerHTML = (h1.contentEditable = !h1.isContentEditable) 
                                  ? (h1.focus(),"Save")
                                  : "Edit";
          }
          
        });
      }
    });
    <editable-h1>Hello World!</editable-h1>
    
    <editable-h1>Hello Web Components World!</editable-h1>
    🎜

    répondre
    0
  • Annulerrépondre