Может кто-нибудь объяснить использование this.html в примере условного рендеринга? - PullRequest
Новая
       27

Может кто-нибудь объяснить использование this.html в примере условного рендеринга?

0 голосов
/ 17 декабря 2018

Я пытаюсь понять источник использования теговой функции шаблона this.html в методе рендеринга LoginControl из этого примера: 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 исходит в этом примере, будут полезны для меня.

...