react实现目录定位（定位到对应内容）滚动高亮，帮我写一个完整的例子

在React中实现目录定位并滚动到对应的高亮功能，通常需要结合HTML、CSS和JavaScript。下面是一个基本的例子，假设我们有一个Markdown-like的文本列表和一个可滚动的`ScrollableContent`组件：

import React, { useState, useRef } from 'react';

// 定义一个简单的Markdown-like文本组件
const ListItem = ({ text }) => (
  <li key={text}>
    <a href={`#${text}`}>{text}</a>
  </li>
);

// 可滚动的内容容器
const ScrollableContent = ({ children }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef(null);

  // 当用户点击链接时，滚动到相应位置
  const handleClick = (e) => {
    const targetId = e.target.getAttribute('href').substring(1); // 去除'#'
    const targetNode = document.getElementById(targetId);
    if (targetNode) {
      setScrollTop({
        top: targetNode.offsetTop,
        behavior: 'smooth', // 平滑滚动效果（可选）
      });
    }
  };

  return (
    <div ref={containerRef} style={{ scrollTop: scrollTop }}>
      <ul onClick={handleClick}>{children.map(item => <ListItem {...item} />)}</ul>
    </div>
  );
};

// 主页组件示例，包含目录和内容
function App() {
  // 假设这是你的目录数据
  const directory = [
    { id: '1', title: '标题一' },
    { id: '2', title: '标题二' },
    // 更多...
  ];

  return (
    <>
      {/* 目录 */}
      <ul id="directory">
        {directory.map((item) => (
          <ListItem key={item.id} text={item.title} />
        ))}
      </ul>

      {/* 可滚动的内容 */}
      <ScrollableContent>
        {/* 根据目录内容生成实际的文章内容 */}
        {directory.map((item, index) => (
          <p key={index} id={item.id}>
            这是标题{item.title}的内容...
          </p>
        ))}
      </ScrollableContent>
    </>
  );
}

export default App;

在这个例子中，当用户点击目录中的链接时，会触发`handleClick`函数，设置滚动条的位置使其滚动到相应的段落。请注意，这个示例假定了每个目录项都有一个唯一的ID，这在实际应用中可能需要从服务器获取或者由编辑器自动生成。