如何访问styled-component的子元素？React自定义Tab焦点需求

要实现按下Tab时把焦点设置到MyContent的第一个子元素，你可以按以下方式处理：

1. 用React的useRef钩子获取MyContent对应的DOM节点
2. 在onKeyDown事件里，通过DOM节点定位目标子元素并设置焦点，同时阻止默认Tab行为

完整代码示例：

import { useRef } from 'react';

export const MyContentGroup = () => {
  const myContentRef = useRef(null);
  
  return (
    <MyContent
      ref={myContentRef}
      id={`my-content-id-${contentHeader}`}
      onKeyDown={(e) => {
        if(e.key === 'Tab' && e.currentTarget.id.match(/^my-content-id/)) {
          e.preventDefault();
          
          // 优先找第一个可聚焦的子元素（覆盖按钮、输入框等常见可聚焦元素）
          const firstFocusable = myContentRef.current?.querySelector(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          
          if (firstFocusable) {
            firstFocusable.focus();
            return;
          }
          
          // 如果没有可聚焦元素，尝试给第一个子元素设置焦点（仅当它支持focus时有效）
          const firstChild = myContentRef.current?.firstElementChild;
          if (firstChild) firstChild.focus();
        }
      }}
    >
      {/* MyContent的子元素写在这里 */}
    </MyContent>
  )
}

关键说明 #

• styled-components包装的MyContent本质是原生div，所以useRef能直接拿到真实DOM节点，这是访问子元素的基础。
• 必须调用e.preventDefault()阻止默认Tab行为，否则浏览器自带的焦点跳转逻辑会覆盖你的手动设置。
• 优先查找可聚焦元素是因为普通div这类元素默认无法获得焦点，这样处理更适配实际场景。
• 如果子元素是自定义React组件，只要组件内部渲染了原生可聚焦元素，querySelector就能正常定位到它。

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