如何在material.io中重新实现hyperHTML组件？

Question

我正在查看如何实现/集成material.io组件/与React组件集成的这个React示例：

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项目来创建真正的自定义元素)。

以下是一个基本的例子：

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所做的就是创建您所编写的内容，仅此而已。

我希望这些澄清将有助于你取得进展。在这里，最终，回答其他问题。