React组件Div聚焦时Tab导航优化：条件渲染按钮焦点保留方案

问题背景 #

当前React组件中，按钮通过状态条件渲染，导致Tab导航时按钮尚未渲染，出现焦点丢失问题。需实现以下需求：

• .App容器在内部元素聚焦时，边框变为lime
• Tab导航可正常在input和按钮间切换
• 按钮仅在容器聚焦状态下显示

最优方案：CSS控制可见性（无状态依赖） #

核心思路是保留按钮在DOM中的存在，通过CSS控制其显示/隐藏，而非条件渲染移除，确保Tab导航能正常识别按钮；同时利用:focus-within伪类实现容器样式和按钮显示的联动，无需React状态跟踪。

React组件代码 #

import "./styles.css";

export default function App() {
  return (
    <div>
      <div className="App">
        <input className="input" />
        <button className="toggle-btn">Show Button</button>
      </div>
      <p>Out of Box content</p>
    </div>
  );
}

CSS代码 #

.App {
  display: flex;
  border: 2px solid aqua;
  align-items: center;
  column-gap: 2vw;
  padding: 2rem;
}

.App:focus-within {
  border: 2px solid lime;
}

.input {
  flex: auto;
}

/* 默认隐藏按钮，禁止交互与聚焦 */
.toggle-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute; /* 不占用布局空间 */
  tab-index: -1;
}

/* 容器内元素聚焦时，显示按钮并恢复交互能力 */
.App:focus-within .toggle-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  position: static;
  tab-index: 0;
}

备选方案：条件渲染+延迟焦点判断 #

若需保留条件渲染逻辑，可通过延迟判断焦点位置，避免切换焦点时按钮被误移除：

React组件代码 #

import { useState, useRef } from "react";
import "./styles.css";

export default function App() {
  const [insideApp, setInsideApp] = useState(false);
  const appContainerRef = useRef(null);

  const handleBlur = () => {
    // 延迟100ms判断，等待焦点完成切换到按钮
    setTimeout(() => {
      const hasFocusInside = appContainerRef.current?.contains(document.activeElement);
      setInsideApp(hasFocusInside);
    }, 100);
  };

  return (
    <div 
      ref={appContainerRef}
      onFocus={() => setInsideApp(true)} 
      onBlur={handleBlur}
    >
      <div className="App">
        <input className="input" />
        {insideApp && <button>Show Button</button>}
      </div>
      <p>Out of Box content</p>
    </div>
  );
}

说明 #

• 最优方案依赖CSS原生能力，性能更好且代码更简洁，推荐使用
• 备选方案通过延迟判断解决焦点丢失问题，但引入了定时器，复杂度更高

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