htm 介绍
htm 实际上将jsX风格的语法更进一步！htm适用于大多数Virtual DOM库 .
npm安装:
npm i htm
import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(react.createElement);
// just want htm + preact in a single file? there's a highly-optimized version of that:
import { html,render } from 'https://unpkg.com/htm/preact/standalone.mjs'
例子：
<!DOCTYPE html>
<html lang="en">
<title>htm Demo</title>
<script type="module">
import { html,Component,render } from 'https://unpkg.com/htm/preact/standalone.mjs';
class App extends Component {
addTodo() {
const { todos = [] } = this.state;
this.setState({ todos: todos.concat(`Item ${todos.length}`) });
}
render({ page },{ todos = [] }) {
return html`
<div class="app">
<${Header} name="ToDo's (${page})" />
<ul>
${todos.map(todo => html`
<li>${todo}</li>
`)}
</ul>
<button onClick=${() => this.addTodo()}>Add Todo</button>
<${Footer}>footer content here<//>
</div>
`;
}
}
const Header = ({ name }) => html`<h1>${name} List</h1>`
const Footer = props => html`<footer ...${props} />`
render(html`<${App} page="All" />`,document.body);
</script>
</html>
GitHub:https://github.com/developit/htm
网站描述:使用标准标记模板的 JSX 替代方案
htm
小编说
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。