React中如何点击导航链接自动展开隐藏区块并滚动到对应位置

完全可以实现，核心逻辑是 先触发状态更新渲染目标组件，等DOM挂载完成后再执行滚动操作，具体实现步骤如下：

实现步骤 #

• 第一步：状态共享
  首先需要将控制组件显隐的toShow状态和对应的setToShow方法暴露给Navbar组件：如果Navbar和隐藏组件的父组件为同一组件，直接将状态定义在公共父级并透传props即可；如果二者层级差距较大，可以用React Context或全局状态管理库做状态共享。

• 第二步：自定义滚动逻辑
  不要直接依赖HashLink的默认锚点跳转能力，改为自定义点击事件，先修改状态渲染组件，再触发滚动。

代码示例 #

基础实现方案

// Navbar 组件内逻辑
const handleJumpToHidden = () => {
  // 先更新状态，触发隐藏组件渲染
  setToShow(1);
  // 等待DOM更新完成后执行滚动
  setTimeout(() => {
    const targetEl = document.getElementById('myHiddenComponent');
    targetEl?.scrollIntoView({ behavior: 'smooth' });
  }, 0);
};

// 渲染跳转按钮/链接
<button onClick={handleJumpToHidden} className="nav-link">
  GO TO HIDDEN SECTON
</button>

保留HashLink哈希标记的方案

如果你希望保留URL哈希标记的原有能力，可以改写成如下形式：

<HashLink 
  smooth 
  to='#myHiddenComponent'
  onClick={(e) => {
    // 阻止默认跳转，此时目标元素还没渲染，跳转无效
    e.preventDefault();
    setToShow(1);
    setTimeout(() => {
      document.getElementById('myHiddenComponent')?.scrollIntoView({behavior: 'smooth'});
      // 手动更新URL哈希，和原HashLink行为保持一致
      window.location.hash = 'myHiddenComponent';
    }, 0);
  }}
>
  GO TO HIDDEN SECTON
</HashLink>

兼容直接访问带哈希URL的方案

如果需要支持用户直接打开带#myHiddenComponent哈希的URL时自动滚动，可以在隐藏组件的父组件内添加如下监听逻辑：

useEffect(() => {
  // 当组件渲染完成、且当前URL哈希对应目标元素时触发滚动
  if (toShow === 1 && window.location.hash === '#myHiddenComponent') {
    document.getElementById('myHiddenComponent')?.scrollIntoView({
      behavior: 'smooth'
    });
  }
}, [toShow]);

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