React中如何通过H2元素ID生成跳转列表？代码问题求助

问题原因 #

你当前代码中，Array.from(document.getElementsByTagName('h2'))是在组件函数执行阶段调用的，但此时组件还未完成DOM渲染，页面上还不存在那些h2元素，所以获取到的h2数组是空的，最终生成的列表自然没有内容。

修改后的代码 #

不要直接从DOM中提取数据，而是先定义一份统一的数据源，用这份数据同时渲染h2元素和Link列表，保证数据和视图同步：

import logo from './logo.svg';
import './App.css';
import { Link } from "react-router-dom";

function App() {
  // 定义h2的数据源，包含id和文本内容
  const h2Items = [
    { id: 'first', text: 'First item' },
    { id: 'second', text: 'Second item' },
    { id: 'Third', text: 'Third item' }
  ];

  // 基于数据源生成Link列表
  const list = h2Items.map(item => (
    <li key={item.id}>
      {/* 页面内锚点跳转需要给to属性加上#前缀 */}
      <Link to={`#${item.id}`}>{item.text}</Link>
    </li>
  ));

  return (
    <div className="App">
      {/* 基于数据源渲染h2元素 */}
      {h2Items.map(item => (
        <h2 key={item.id} id={item.id}>{item.text}</h2>
      ))}

      <h4>List of h2:</h4>
      <ul>
        {list}
      </ul>
    </div>
  );
}

export default App;

需要学习的核心概念 #

• 数据驱动视图：React的核心设计理念，所有UI元素都应该从数据生成，而不是从DOM中反向提取数据。这样能保证数据和视图始终保持一致，避免DOM操作带来的同步问题。
• 组件渲染时机：React组件函数执行时，DOM还未生成，此时直接操作DOM无法获取到即将渲染的元素。只有在组件完成渲染后（比如使用useEffect钩子）才能安全操作DOM，但这类场景应该尽量避免。
• 虚拟DOM与状态管理：React通过虚拟DOM管理真实DOM，当状态或数据源更新时，会自动重新渲染相关组件。如果h2内容是动态获取的（比如API请求），可以使用useState钩子存储数据，实现数据更新时UI自动同步。

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