React中如何根据跳过链接焦点状态调整导航栏高度？代码问题求助

你的代码主要有三个核心问题：

1. 逻辑错误：checkFocus函数中，无论if条件是否成立，最后都会强制把linkHasFocus设为false，导致永远返回false。
2. 状态管理错误：直接修改this.linkHasFocus不会触发React组件重渲染，即便变量值变化，UI也不会更新。
3. Props传递错误：你把函数本身传给了TopNavbar，但styled-components需要的是布尔值，不是函数引用。

下面是修复后的实现方案，分函数组件和类组件两种写法：

函数组件写法（推荐） #

用React的useState管理焦点状态，直接给跳过链接绑定onFocus和onBlur事件来更新状态，无需手动查询DOM：

import { useState } from 'react';
import styled from 'styled-components';

// 导航栏样式组件
const TopNavbar = styled.div`
  height: ${props => (props.linkHasFocus ? '9rem' : '4rem')};
  transition: height 0.3s ease; /* 可选：添加过渡动画让高度变化更自然 */
  position: relative; /* 确保跳过链接的绝对定位基于导航栏 */
  /* 你的其他导航栏样式 */
`;

// 跳过链接样式组件
const SkipLink = styled.a`
  /* 默认隐藏在视口外 */
  position: absolute;
  top: -4rem;
  left: 1rem;
  background: #222;
  color: white;
  padding: 0.8rem 1.2rem;
  z-index: 100;
  text-decoration: none;
  
  /* 聚焦时显示在导航栏顶部 */
  &:focus {
    top: 0;
  }
`;

function Navbar() {
  // 用useState管理焦点状态
  const [linkHasFocus, setLinkHasFocus] = useState(false);

  return (
    <TopNavbar linkHasFocus={linkHasFocus}>
      <SkipLink
        id="skip-link"
        href="#main-content"
        // 聚焦时更新状态
        onFocus={() => setLinkHasFocus(true)}
        // 失焦时重置状态
        onBlur={() => setLinkHasFocus(false)}
      >
        跳转到主要内容
      </SkipLink>
      {/* 你的Logo、导航菜单等内容 */}
    </TopNavbar>
  );
}

类组件写法 #

如果你的项目仍在使用类组件，用this.state和setState来管理状态：

import React, { Component } from 'react';
import styled from 'styled-components';

const TopNavbar = styled.div`
  height: ${props => (props.linkHasFocus ? '9rem' : '4rem')};
  transition: height 0.3s ease;
  position: relative;
  /* 你的其他导航栏样式 */
`;

const SkipLink = styled.a`
  position: absolute;
  top: -4rem;
  left: 1rem;
  background: #222;
  color: white;
  padding: 0.8rem 1.2rem;
  z-index: 100;
  text-decoration: none;
  
  &:focus {
    top: 0;
  }
`;

class Navbar extends Component {
  state = {
    linkHasFocus: false
  };

  handleLinkFocus = () => {
    this.setState({ linkHasFocus: true });
  };

  handleLinkBlur = () => {
    this.setState({ linkHasFocus: false });
  };

  render() {
    return (
      <TopNavbar linkHasFocus={this.state.linkHasFocus}>
        <SkipLink
          id="skip-link"
          href="#main-content"
          onFocus={this.handleLinkFocus}
          onBlur={this.handleLinkBlur}
        >
          跳转到主要内容
        </SkipLink>
        {/* 你的Logo、导航菜单等内容 */}
      </TopNavbar>
    );
  }
}

关键修复点说明 #

1. 状态驱动UI：用React的状态系统管理linkHasFocus，状态变化时会自动触发组件重渲染，更新导航栏高度。
2. 事件绑定替代DOM查询：直接给跳过链接绑定焦点事件，比手动查询document.activeElement更可靠，也符合React的数据流逻辑。
3. 传递正确的Props值：把布尔类型的状态变量传给TopNavbar，而不是传递函数，确保styled-components能正确解析条件样式。

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