React Hook Form 中获取原生元素引用的技术方案

在 React Hook Form 库的使用过程中，开发者有时需要直接访问表单元素的原生引用（original reference）。本文探讨了这一需求的背景、技术实现方案以及相关考量。

背景与需求

React Hook Form 作为流行的表单管理库，通过封装表单元素的引用（ref）来提供统一的表单控制接口。然而，在某些特定场景下，开发者需要直接访问底层原生元素：

1. 滚动定位：当表单元素位于 ScrollView 内时，需要测量元素布局以实现精准滚动定位
2. 高级交互：某些特殊交互需要直接操作 DOM 元素
3. 第三方集成：与其他需要直接元素引用的库进行集成

当前限制

React Hook Form 的 useController 钩子会封装传入的 ref，导致开发者无法直接访问原始元素引用。这种封装虽然提供了统一的 API（如 focus、select 等方法），但也限制了某些底层操作的可能性。

技术实现方案

核心思路是在封装引用时保留对原始引用的访问通道。具体实现可参考以下代码：

ref: React.useCallback((elm) => {
  const field = get(control._fields, name);
  
  if (field && elm) {
    field._f.ref = {
      getOriginalRef: () => elm, // 暴露原始引用
      focus: () => elm.focus(),
      select: () => elm.select(),
      setCustomValidity: (message) => elm.setCustomValidity(message),
      reportValidity: () => elm.reportValidity(),
    };
  }
}, [control._fields, name])

实现考量

1. 向后兼容：新增 getOriginalRef 方法不会破坏现有 API
2. 性能影响：仅增加一个函数引用，内存开销极小
3. 安全性：开发者明确知道他们正在访问底层 API，需自行负责稳定性

应用场景示例

以 React Native 中的 ScrollView 内表单元素定位为例：

const { field } = useController({ name: 'username' });

const handleFocus = () => {
  const originalRef = field.ref.getOriginalRef();
  originalRef.measureLayout(scrollViewRef.current, (x, y) => {
    scrollViewRef.current.scrollTo({ y, animated: true });
    field.ref.focus();
  });
};

总结

在 React Hook Form 中提供原生元素引用访问能力，既保持了库的抽象优势，又为开发者提供了必要的灵活性。这种设计模式值得在类似的抽象库中推广，它体现了"约定优于配置，但不限制能力"的设计哲学。

对于库维护者而言，这一改动成本低、收益高，是值得考虑的功能增强。对于开发者而言，这一功能将解决许多需要直接操作 DOM 的特殊场景需求。