solid-js - 如何在 Solid.js 中使用 Ref？

Question

所以我正在学习并开始使用Solid.js，我想知道我们如何处理solid.js中的ref，就像react中的useRef一样。

我检查了文档，我尝试了这样的事情:

      let navigationOuterRef: HTMLDivElement
      let navigationRef: HTMLUListElement
    
     const MenuNavbar = (props: {layoutDatas: LayoutNavigation[]}) => {
        
       const [priorityItems, setPriorityItems] = createSignal<LayoutNavigation[]>(props.layoutDatas);
      
      //....
    
      return (
        <div ref={navigationOuterRef} class="....">
          <ul ref={navigationRef} class="...">
            <For each={priorityItems()}>
              {(labelName) => (
                <li class="flex items-center cursor-pointer">
                  {labelName.label}
                </li>
              )}
            </For>
          </ul>
        //...

它有效...但我收到了类似的警告消息

computations created outside a createRoot or render will never be disposed

所以我认为问题是我在组件外部创建了引用，因此如果没有适当的上下文，如果卸载它就无法处理它，但是如果我在组件中移动引用声明，我在 TS 中会出现此错误

Variable 'navigationOuterRef' is used before being assigned.

那么我做错了什么，正确的方法是什么？

Answer 1

是的，组件要求您在正确的所有者下运行它们，即 render 函数，或者通过 createRoot 函数或其他组件创建的根。这是构建所有权图所必需的，该图显示谁拥有谁，以便在处置组件时，其资源将被清理。因此，警告消息与 refs 无关，而是与在响应式上下文之外创建的组件有关。

除此之外，refs 是底层 DOM 节点的句柄。它们有两种类型:变量和函数。

变量表单要求您使用 onMount 钩子(Hook)，因为当组件加载时， ref 将是未定义的，只有在渲染阶段完成后它们才指向实际的 DOM 元素。

let ref;

console.log(ref); // undefined

onMount(() => console.log(ref)); // div

<div ref={ref} />

为什么它们不能立即可用是因为 Solid 在构建 DOM 树时运行赋值操作。

<div ref={el => ref=el} /> 

变量形式基本上是函数形式的语法糖。

由于 ref 最初不可用，因此 ref 元素的正确类型是:

let navigationOuterRef: HTMLDivElement | undefined;

如果不输入undefined，则会出现类型错误:

Variable 'X' is used before being assigned

一旦 DOM 节点可用，函数表单就会接收 DOM 元素:

function handleRef(ref: HTMLDivElement) {
  console.log(ref); // div
}

<div ref={handleRef} />

编译后的代码在创建 DOM 树时调用 ref 函数。

https://www.solidjs.com/docs/latest#ref