react实现目录定位滚动高亮

在React中实现目录定位滚动高亮通常涉及以下几个步骤：

1. **状态管理**：首先，你需要维护当前选中的目录项的状态，这可以是一个数组，表示已经高亮的路径元素。

state = {
  highlightedPath: [],
};

2. **组件结构**：目录作为树形组件（如`TreeComponent`），每个节点都有一个链接(`NavLink`)，当点击时，传递给父组件更新状态的回调。

function NavLink({ path, onClick }) {
  return (
    <a
      href="#"
      onClick={() => onClick(path)}
      // 当前路径匹配时添加样式
      className={isCurrentPath(path) ? 'highlighted' : ''}
    >
      {path}
    </a>
  );
}

// TreeComponent
<TreeComponent onHighlight={addHighlightedPath} />

3. **处理滚动事件**：在滚动时检查滚动位置，并更新`highlightedPath`，以便找到对应的高亮部分。你可以使用`window.scrollY`获取滚动位置，然后遍历`highlightedPath`来确定哪些元素应该保持高亮。

4. **CSS样式**：为`.highlighted`类添加合适的样式，比如背景颜色、边框等，使其在文档中突出显示。

5. **重渲染和滚动同步**：当`highlightedPath`发生变化时，需要手动触发一次页面重新渲染，同时确保滚动位置也相应调整到新的高亮区域。

componentDidUpdate(prevProps, prevState) {
  if (!isEqual(prevState.highlightedPath, this.state.highlightedPath)) {
    scrollTo HighlightedElement(this.state.highlightedPath);
  }
}

// 利用第三方库如react-scroll-to-element
import ScrollTo from 'react-scroll-to-element';

const HighlightedElement = ({ elementId }) => (
  <ScrollTo id={elementId} offset={0} duration={500} smooth />
);