如何在hyperHTML中重新實現material.io組件？

Question

我在看的實施/集成如何material.io組件與此陣營例子陣營組成：

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

我不知道怎麼一會去這樣做同樣具有hyperHTML因爲沒有生命週期事件調用在hyper.Component內，如componentDidMount或componentWillUnmount。

據說我可以在render調用後做到這一點，但通常是從組件外調用。

Answer 1

對不起我現在纔看到這個。

我想澄清一些事情：

有內hyper.Component像componentDidMount或componentWillUnmount沒有生命週期事件要求。

如果您嘗試最新版本，或者讓我們說1.10+，你必須定義每個hyper.Component類定義的onconnected(evt) { ... }和ondisconnected(evt) { ... }方法的能力。

這是一個相當新的功能，遺憾的是還沒有記錄。但它提供了所有您需要表現得像自定義元素connectedCallback和disconnectedCallback方法（並記住，還有一個HyperHTMLElement project創建真正的自定義元素）。

下面是一個基本的例子：

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>`; 
    } 
} 

我希望這會給你足夠的力量來複製材料的例子。

---

另一部分，我想澄清：

有人說，我能做到這一點渲染後調用但通常是從組件的外面叫。

這不完全正確。是的，如果需要，component.render()會自動調用，但重要的是您返回的內容。

我使用，我用以前的Clock例如同一代碼：

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

，你可以看到，你可以隨時與渲染節點的交互。畢竟，所有hyperHTML確實，正在創建你寫的內容，沒有什麼更多，沒有什麼。

我希望這些說明能幫助你前進。 在這裏，最終回答其他問題。