我正在查看这个 React 示例,了解 Material.io 组件如何实现/与 React 组件集成:
我想知道如何对 hyperHTML 执行相同的操作,因为 hyper.Component
中没有生命周期事件调用,例如 componentDidMount
或 componentWillUnmount
.
据说我可以在 render
调用之后执行此操作,但这通常是从组件外部调用的。
最佳答案
抱歉我现在才看到这个。
我想澄清一些事情:
there are no lifecycle event calls within hyper.Component like componentDidMount or 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>`;
}
}
我希望这会给您足够的能力来复制 Material 示例。
<小时/>我想澄清的另一部分:
It was said that I can do that after render call but that is typically called from outside of component.
这并不完全正确。是的,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 所做的一切就是创建您编写的内容,仅此而已。
我希望这些说明能够帮助您继续前进。 最后,在这里回答其他问题。
关于javascript - 如何在 hyperHTML 中重新实现 Material.io 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46411256/