元素

PreffX 直接将 JSX 标记转换为 DOM 元素。这允许您使用信号配置属性、属性和事件监听器的详细响应性。

实现特性：

响应性：使用信号系统（@preact/signals-core）来跟踪属性的变化
生命周期管理：元素被移除时自动删除事件处理程序和订阅
属性名称转换：将 camelCase 转换为 kebab-case 用于属性
命名空间支持：支持 HTML、SVG 和 MathML 元素

元素参数

以 $ 开头的参数直接设置 DOM 元素属性。如果将信号作为值传递，则该属性将与该信号同步：

tsx

// 静态属性
<div
  $innerHTML='<p>Content</p>'
></div>

// 动态属性
const textContent = signal('Text');
<div
  $textContent={textContent}
></div>

以 on 开头的参数作为事件监听器处理。您可以传递简单的处理函数或带有修饰符的对象。如果将信号作为值传递，则处理程序将与该信号同步：

tsx

// 静态事件监听器
<div
  onClick={() => console.log('clicked')}
></div>

// 带修饰符的静态事件监听器
<div
  onClick={{
    handler: () => console.log('Click'),
    // 阻止默认行为
    prevent: true,
    // 停止传播
    stop: true,    
    // 监听器在调用后会自动移除
    once: true,
    // 监听器永远不会调用 preventDefault()
    passive: true,
    // 事件将在 DOM 树中位于其下方的任何 EventTarget 之前分派给注册的监听器
    capture: true
  }}
></div>

// 动态事件监听器
const clickListener = signal(() => console.log('Click'));
<div
  onClick={clickListener}
></div>

其余参数作为属性进行处理：

tsx

// 静态属性
<div
  id='my-id'
  data-value='123'
  style='color:red;font-size:16px;'
  class='active'
>
</div>

<div
  style={{
    color: 'red',
    fontSize: '16px'
  }}
  class={{
    active: true,
    passive: false
  }}
>
</div>

// 动态属性
const classNames = signal(['active', 'base']);
<div
  class={classNames}
></div>

元素引用

$ref 参数允许您获取 DOM 元素的引用：

tsx

// 您可以使用回调
let elementRef;
<div
  $ref={(el) => { elementRef = el; }}
></div>
// 或信号
const signalRef = signal();
<div
  $ref={signalRef}
></div>

命名空间

通常不需要，但您可以使用 $ns 参数显式指定元素的命名空间：

tsx

<svg>
  <a $ns='svg'></a>
</svg>

元素 ​

元素参数 ​

元素引用 ​

命名空间 ​

元素

元素参数

元素引用

命名空间