我试图从以下示例中了解LoginControl的render方法中使用this.html
标记模板函数的来源:https://viperhtml.js.org/hyperhtml/examples/#!fw=React&example=Conditional%20Rendering
class LoginControl extends HTMLElement {
constructor(...args) {
super(...args).html = hyperHTML.bind(this);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
}
connectedCallback() { this.setState({isLoggedIn: false}); }
setState(state) { this.state = state; this.render(); }
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
return this.html`
<div>${[
Greeting(isLoggedIn),
isLoggedIn ?
LogoutButton(this.handleLogoutClick) :
LoginButton(this.handleLoginClick)
]}</div>`;
}
}
this.render
与CustomElements有关吗?
在其他示例中,其定义如下:
get html() { return this._html || (this._html = hyperHTML.bind(this)); }
无论如何,在该示例中任何有关this.html
来自何处的提示都将对我有所帮助。