Rax 中如何正确使用 useRef 获取 DOM 元素？

梦雅的笔记提问于 2026-03-17 17:10:19 阅读 53

框架

我在 Rax 项目里想用 useRef 拿到一个 view 的引用，但总是 undefined，是不是写法有问题？试过在 useEffect 里读取，也加了 ref 属性，但就是拿不到。

代码大概是这样的：

import { createElement, useRef, useEffect } from 'rax';

export default function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    console.log(myRef.current); // 这里打印出来是 null
  }, []);

  return createElement('view', { ref: myRef }, 'Hello');
}

跨端方案

我来解答赞 7 收藏

反馈

1 条解答

颖杰 ☘︎ Lv1

你的代码写法本身没问题，useRef + useEffect 这个套路是通用的。

问题很可能出在 Rax 的运行环境上。Rax 是跨端框架，如果你运行在 Weex 环境或者小程序环境，原生组件的 ref 挂载时机和 Web 端不太一样。

试试改成回调 ref 的写法，能更可靠地捕获到：

import { createElement, useState, useEffect } from 'rax';



export default function MyComponent() {

  const [domRef, setDomRef] = useState(null);



  useEffect(() => {

    console.log(domRef); // 这里应该能拿到了

  }, [domRef]);



  return createElement('view', { 

    ref: (el) => setDomRef(el) 

  }, 'Hello');

}

回调 ref 是 Rax/React 中更稳妥的方式，它会在 ref 被赋值时立即触发回调，不依赖 current 的异步更新。

如果你是想在 Weex 环境里操作原生组件，Rax 暴露的 ref 其实是个 Weex 组件实例，不是 DOM 节点这时候得用 Weex 的 API 来操作。如果你是在 Web 环境，那上面这个写法应该能解决。

还有个小问题检查一下：你的 Rax 版本是多少？有些早期版本在 ref 处理上确实有坑，建议升级到最新稳定版试试。

2026-03-18 08:05