有人可以在条件渲染示例中解释this.html的用法吗?

时间:2018-12-16 22:16:34

标签: hyperhtml

我试图从以下示例中了解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来自何处的提示都将对我有所帮助。

0 个答案:

没有答案