rendu conditionnel à la mise à jour hyper.Component pas DOM

Question

Je me demande pourquoi extrait suivant est pas mis à jour DOM

const { hyper, wire } = hyperHTML; 

    class Input extends hyper.Component { 
     get defaultState() { 
     return { error: false }; 
     } 
     onclick() { 
     this.setState(prev => ({ error: !prev.error })); 
     } 

     render() { 

     const textField = wire() 
     ` 
      <div onconnected=${this} ondisconnected=${this}> 
      <input type="text" value="foo" onclick=${this}> 
      <label>bar</label> 
      </div> 
      `; 


     let finalNode; 
     if (this.state.error) { 

      finalNode = this.html ` 
      <div> 
       ${textField} 
       <p> 
       some name 
       </p> 
      </div> 
      `; 

     } else { 
      finalNode = this.html ` 
      <div> 
       ${textField} 
      </div> 
      `; 
     } 
     return finalNode; 
     } 
    } 


    document 
     .getElementById('root') 
     .appendChild(new Input().render()); 

j'attendre qu'il serait à rendre textField premier et sur un clic pour rendre l'élément p le long. Je peux voir que l'appel de rendu est fait mais l'élément résultant ne finit pas dans DOM.

Answer 1

Avec hyper.Component la meilleure façon de faire est de rendre le contenu conditionnel et non pas la racine dans son ensemble. Pour ce faire, vous pouvez simplement utiliser un ternaire, ou un array.concat(...) ou tout autre moyen qui mettra à jour le composant. C'est comme la différence entre la mise à jour d'une instance et sa mise en place. De l'intérieur, le composant n'a pas le pouvoir de se remplacer sur son parent, sauf si vous le faites explicitement.

Toutefois, cet exemple est plus facile que cela ne l'est, et vous pouvez le voir fonctionner sur ce Code Pen.

En outre, si vous ne spécifiez pas les rappels onconnected et ondisconnected dans la classe, il n'est pas nécessaire de les spécifier sur le nœud.

const { hyper, wire } = hyperHTML; 

class Input extends hyper.Component { 

    get defaultState() { return { error: false }; } 

    onclick() { 
    this.setState(prev => ({ error: !prev.error })); 
    } 

    render() { return this.html` 
    <div> 
     <div> 
     <input type="text" value="foo" onclick=${this}> 
     <label>bar</label> 
     </div> 
     ${this.state.error ? 
     wire(this, ':extra') 
     `<p> some name </p>` : 
     null 
     } 
    </div>`; 
    } 
} 

document.body.appendChild(new Input().render()); 

J'espère que cela a aidé.