SolidJS中ref回调内访问元素属性的问题及合理实现咨询

问题背景 #

我编写了如下组件，希望在ref回调中访问元素的id属性，但输出的是空字符串：

function Div() {
    return (
        <div id="hello" ref={el => {
            console.log(el.id) // <empty string>
        }}/>
    )
}

我尝试用setTimeout做临时处理，能拿到正确的id值，但不确定这种方案的问题：

function Div() {
    return (
        <div id="hello" ref={el => {
            setTimeout(() => {
                console.log(el.id) // "hello"
            })
        }}/>
    )
}

临时方案的弊端 #

• 不可靠：setTimeout的执行时机完全依赖浏览器事件循环，无法保证元素属性已经完成更新。如果页面渲染任务较重，回调触发时可能还是拿不到正确值。
• 性能冗余：额外创建宏任务会增加不必要的执行开销，频繁使用会拖慢页面响应速度。
• 代码不规范：属于hack式的临时写法，违背SolidJS的设计逻辑，后续维护时容易让人困惑。

标准实现方案 #

在SolidJS中，有两种更可靠的方式来获取挂载完成后的元素属性：

方式1：使用onMount钩子 #

onMount会在组件完全挂载到DOM树后执行，此时元素的所有属性都已生效：

import { createRef, onMount } from 'solid-js';

function Div() {
  const divRef = createRef();

  onMount(() => {
    console.log(divRef.current.id); // 输出 "hello"
  });

  return <div id="hello" ref={divRef} />;
}

方式2：结合createEffect监听Ref变化 #

通过将元素引用存入变量，用createEffect监听变量变化，当ref赋值完成后自动触发逻辑：

import { createEffect } from 'solid-js';

function Div() {
  let divEl;

  createEffect(() => {
    if (divEl) {
      console.log(divEl.id); // 输出 "hello"
    }
  });

  return <div id="hello" ref={el => divEl = el} />;
}

原理说明 #

SolidJS中，ref回调的执行时机是元素被创建但尚未挂载到DOM的阶段，此时元素的属性还未同步到DOM节点上。而onMount和createEffect都能确保在元素完全挂载、属性生效后再执行逻辑，避免了依赖事件循环的不可靠问题。

内容的提问来源于stack exchange，提问作者xehpuk