material.io 구성 요소를 hyperHTML로 다시 구현하는 방법은 무엇입니까?

Question

내가 구현/통합하는 방법을 material.io 구성 요소의 반작용 예제를 찾고 구성 요소 반응 :

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

내가 더 라이프 사이클 이벤트 통화가 없기 때문에 하나 hyperHTML과 같은 일을 가겠어요 궁금 또는 componentWillUnmount과 같은 hyper.Component입니다.

나는 render 호출 후에이 작업을 수행 할 수 있다고 말했지만 일반적으로 구성 요소 외부에서 호출됩니다.

Answer 1

죄송합니다.

나는 몇 가지를 명확히하고 싶습니다 :

에는 라이프 사이클 이벤트가 componentDidMount 또는 componentWillUnmount 같은 hyper.Component 내에서 호출하지가 있습니다.

당신이 최신 버전을 시도하거나의이 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()이 자동으로 호출되지만 중요한 것은 반환하는 것입니다. 당신이 볼 수있는

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

, 당신은 항상 렌더링 노드와 상호 작용할 수 :

나는 이전 Clock 예를 들어 사용했던 동일한 코드를 사용하고 있습니다. 결국, 모두 hyperHTML은 당신이 쓰는 내용을 만드는 것입니다.

이러한 설명이 앞으로 나아갈 수 있기를 바랍니다. 여기, 결국 다른 질문에 대답합니다.