Use htm + preact to implement build-free development pages.
#
example
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>
|
先通过标签加载库,然后就是正常的(P)React 组件的写法,只不过 render 中的组件是基于字符串模板的写法。
Go语言模板
#
svelte
#