最近用到的技术
Use htm + preact to implement build-free development pages.
example
<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 中的组件是基于字符串模板的写法。