Comment réimplémenter les composants material.io dans hyperHTML?

Question

Je cherche à ce React exemple de la façon dont le composant material.io est mis en œuvre/intégré avec React composant:

https://github.com/material-components/material-components-web/blob/master/framework-examples/react/src/Checkbox.js

Je me demande comment on pourrait le faire de même avec hyperHTML car il n'y a pas d'appels d'événements du cycle de vie au sein de hyper.Component comme componentDidMount ou componentWillUnmount.

On a dit que je peux le faire après render appel, mais qui est généralement appelé à l'extérieur du composant.

Answer 1

désolé, je l'ai vu seulement maintenant.

Je voudrais clarifier deux ou trois choses:

il n'y a aucun événement de cycle de vie dans les appels hyper.Component comme componentDidMount ou componentWillUnmount.

Si vous essayez dernière version, ou disons 1.10+, vous aurez la possibilité de définir onconnected(evt) { ... } et ondisconnected(evt) { ... } méthodes dans chacune de votre définition de classe hyper.Component.

Il est une caractéristique assez récente, malheureusement pas encore documenté. mais il offre tout ce que vous avez besoin de se comporter comme des éléments personnalisés connectedCallback et disconnectedCallback méthodes (et rappelez-vous, il y a aussi un HyperHTMLElement project pour créer des éléments réels personnalisés).

Ce qui suit est un exemple de base:

import {Component} from 'hyperhtml'; 

class Clock extends Component { 

    update() { 
    this.time = (new Date).toLocaleTimeString(); 
    this.render(); 
    } 

    // equivalent of Custom Elements connectedCallback 
    onconnected() { 
    console.log('start time'); 
    this.update(); 
    this.timer = setInterval(() => this.update(), 1000); 
    } 

    // equivalent of Custom Elements disconnectedCallback 
    ondisconnected() { 
    console.log('end time'); 
    clearInterval(this.timer); 
    } 

    render() { return this.html` 
    <p 
     onconnected=${this} 
     ondisconnected=${this} 
    > 
     ${this.time} 
    </p>`; 
    } 
} 

J'espère que cela vous donnera assez de puissance pour reproduire l'exemple matériel.

---

L'autre partie, je voudrais préciser:

On a dit que je peux le faire, mais après appel rendu qui est généralement appelé à l'extérieur du composant.

Ce n'est pas tout à fait correct. Oui, le component.render() est appelé automatiquement, si nécessaire, mais ce qui compte, c'est ce que vous retournez.

J'utilise le même code que je l'ai utilisé pour le Clock exemple précédent:

// same code as before 
    render() { 
    const p = this.html` 
    <p 
     onconnected=${this} 
     ondisconnected=${this} 
    > 
     ${this.time} 
    </p>`; 

    // you have a <p> element here 
    // you can do whatever you want 
    // example: 
    p.addEventListener('click', console.log); 

    // now you should return it 
    return p; 
    } 
// rest of the code 

comme vous pouvez le voir, vous pouvez toujours interagir avec le noeud rendu. Après tout, tout hyperHTML fait, crée le contenu que vous écrivez, rien de plus, rien de moins.

J'espère que ces précisions pourraient vous aider à aller de l'avant. Ici, finalement, pour répondre à d'autres questions.