preact组件案例的使用详解

苏承栈
2026-10-04 • 👁 0人浏览过
制作一个下拉框
export function SelectValue({value, setfn, options, disabled}) {
  const toInt = x => x == parseInt(x) ? parseInt(x) : x;
  const onchange = ev => setfn(toInt(ev.target.value));
  return html`
 元素的 onchange 事件处理函数。

当下拉选择框的值发生改变时，这个函数会被调用。

ev.target.value 获取到当前选中的选项的值（字符串类型）。

toInt(ev.target.value) 将获取到的值传递给 toInt 函数，尝试将其转换为整数。

setfn(...) 调用传入的 setfn 函数，并将转换后的值传递给它，从而更新父组件中的 value。

4.return html\\...\;:
使用 Preact 的 html 模板字符串来定义组件的 JSX 结构。

html\\...\`` 是 Preact 的一个标签模板字面量，用于创建虚拟 DOM 节点。

5. 元素（下拉选择框）。
onchange=${onchange} 将 onchange 函数设置为  元素的 CSS 类名，用于控制其样式。 这些类名看起来像是来自 Tailwind CSS。
disabled=${disabled} 根据 disabled prop 的值来禁用或启用下拉选择框。
6.${options.map(v => html\\。

7.:
闭合 。

总结：
SelectValue 组件是一个可复用的下拉选择框组件，它接收选项列表、当前选中的值以及一个用于更新值的函数作为 props。当用户选择不同的选项时，组件会调用 setfn 函数来更新父组件中的值。 toInt 函数用于确保传递给 setfn 的值是整数（如果选项值是整数）。 该组件还支持禁用状态。
export function SelectValue({value, setfn, options, disabled}) {
  const toInt = x => x == parseInt(x) ? parseInt(x) : x;
  const onchange = ev => setfn(toInt(ev.target.value));
  return html`