Question

我正在研究如何使用React组件实现/集成material.io组件的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+，则可以在每个onconnected(evt) { ... }类定义中定义ondisconnected(evt) { ... }和hyper.Component方法。

这是一个相当新的功能，遗憾的是还没有记录。但它提供了所有您需要的行为，如自定义元素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 都会创建您编写的内容，仅此而已。

我希望这些澄清可以帮助你前进。最后，回答其他问题。

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

1 个答案: