我正在查看这个关于 material.io 组件如何与 React 组件实现/集成的 React 示例:
我想知道如何对 hyperHTML 做同样的事情,因为在hyper.Component
likecomponentDidMount
或componentWillUnmount
.
据说我可以在render
调用后执行此操作,但这通常是从组件外部调用的。
我正在查看这个关于 material.io 组件如何与 React 组件实现/集成的 React 示例:
我想知道如何对 hyperHTML 做同样的事情,因为在hyper.Component
likecomponentDidMount
或componentWillUnmount
.
据说我可以在render
调用后执行此操作,但这通常是从组件外部调用的。
抱歉,我现在才看到这个。
我想澄清几件事:
在 hyper.Component 中没有像 componentDidMount 或 componentWillUnmount 这样的生命周期事件调用。
如果您尝试最新版本,或者说 1.10+,您将能够在每个类定义中定义onconnected(evt) { ... }
和 方法。ondisconnected(evt) { ... }
hyper.Component
这是一个相当新的功能,遗憾的是尚未记录。但它提供了像自定义元素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所做的,都是创建您编写的内容,仅此而已。
我希望这些澄清可以帮助您继续前进。在这里,最终,回答其他问题。