1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<script src="https://unpkg.com/htm/preact/standalone.umd.js"></script>
<script>
  const { html, Component, render } = window.htmPreact;
  class DataSource extends Component {
    constructor(props) {
      super(props);
      this.state = { value: 0 };
    }

    add(e) {
      this.setState({ value: this.state.value + 1 })
    }

    // 事件
    render(props, state) {
      return html`
        <div class="row">
          <p>${this.state.value}</p>
          <button onClick=${this.add}>add</button>
        </div>
      `;
    }

    // map
    render1(props, state) {
      return html`
        <div class="row">
          ${props.tables.map((table) => {
            return html` <h3>${table.name}</h3> `;
          })}
        </div>
      `;
    }
  }

  render(html`<${DataSource} />`, document.body);
</script>