React复合组件中如何不依赖DOM操作实现指定子组件间焦点导航

核心思路 #

不用手动查询DOM，通过React组件静态属性标识目标组件 + ref集合维护可导航节点 + 克隆子组件注入属性的方式实现，完全符合React声明式开发规范。

为什么之前child.type判断没生效 #

直接通过child.type对比组件的方式，仅在组件未被任何HOC（比如memo、forwardRef）包装时生效。如果组件经过高阶组件包装，child.type会指向HOC而不是原组件，导致判断失效。更稳定的方式是给目标组件添加静态属性作为识别标识。

完整实现代码 #

基础组件定义 #

import { useRef, Children, cloneElement } from 'react';
import ReactDOM from 'react-dom';

const A = () => (
  <button style={{ display: "block", width: "100%" }}>
    A
  </button>
);
// 给需要参与导航的组件添加静态标识
A.isNavigationTarget = true;

const B = () => (
  <button style={{ display: "block", width: "100%" }}>
    B
  </button>
);

包裹器组件实现 #

const WrapperWithOnPress = (props) => {
  // 存储所有可导航目标的DOM引用
  const targetRefs = useRef([]);
  // 存储当前聚焦的目标索引
  const currentFocusIndex = useRef(0);

  const handleKeyDown = (event) => {
    const validTargets = targetRefs.current.filter(Boolean);
    if (validTargets.length === 0) return;

    let nextIndex = currentFocusIndex.current;
    // 上键
    if (event.keyCode === 38) {
      nextIndex = Math.max(0, nextIndex - 1);
      event.preventDefault();
    }
    // 下键
    if (event.keyCode === 40) {
      nextIndex = Math.min(validTargets.length - 1, nextIndex + 1);
      event.preventDefault();
    }

    if (nextIndex !== currentFocusIndex.current) {
      validTargets[nextIndex].focus();
    }
  };

  // 遍历处理子组件，给目标组件注入ref和聚焦监听
  const processedChildren = Children.map(props.children, (child, index) => {
    // 跳过非React元素节点
    if (typeof child !== 'object' || !child?.type) return child;
    // 仅处理标记为导航目标的组件
    if (child.type.isNavigationTarget !== true) return child;

    return cloneElement(child, {
      // 存储DOM引用
      ref: (node) => {
        targetRefs.current[index] = node;
      },
      // 聚焦时更新当前索引
      onFocus: (e) => {
        currentFocusIndex.current = index;
        // 保留组件原有的onFocus逻辑
        child.props.onFocus?.(e);
      }
    });
  });

  return (
    <div onKeyDown={handleKeyDown}>
      {processedChildren}
    </div>
  );
};

入口组件 #

function App() {
  return (
    <div className="App">
      <WrapperWithOnPress>
        <A />
        <B />
        <A />
        <A />
      </WrapperWithOnPress>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

方案优势 #

• 完全不需要操作DOM查询，所有节点引用由React直接维护
• 不受DOM结构变化影响，不需要额外添加data-hook等标识属性
• 组件类型判断兼容性强，即使组件被HOC包装，只要透传静态标识属性就可以正常识别
• 不会破坏原有子组件的逻辑，原有props会被完整保留

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