为什么React函数组件中调用getElementsByClassName返回undefined？

算力阿峰

2026-9-25

解决方案

错误原因

组件渲染阶段expansionGenerator执行时，返回的section节点还没挂载到真实DOM，getElementsByClassName无法获取到对应元素，因此返回undefined。
React JSX属于虚拟DOM对象，不能直接传入原生DOM的appendChild方法使用，这类原生DOM操作不符合React的设计逻辑。

修正后代码

你提出的两个需求可以直接用React官方推荐的数组map渲染列表的方式实现，不需要操作原生DOM：

import React from 'react';
import Expansion from './Expansion';

// ExpansionView refers to the container box that displays individual expansion boxes
const ExpansionView = (props) => {
  const validExpansion = [
    "Classic", "Naxxramas", "Goblins vs Gnomes", "Blackrock Mountain", "The Grand Tournament", 
    "The League of Explorers", "Whispers of the Old Gods", "One Night in Karazhan", "Mean Streets of Gadgetzan",
    "Journey to Un'Goro", "Knights of the Frozen Throne", "Kobolds & Catacombs", "The Witchwood", 
    "The Boomsday Project", "Rastakhan's Rumble", "Rise of Shadows", "Saviors of Uldum", "Descent of Dragons",
    "Galakrond's Awakening", "Ashes of Outland", "Scholomance Academy", "Madness At The Darkmoon Faire",
    "Forged in the Barrens", "United in Stormwind",
  ];

  return (
    <section className='expansionView'>
      {validExpansion.map(expansionName => (
        <Expansion 
          key={props.expansion[expansionName]} 
          selectExpansion={props.selectExpansion}
          // 如需将数组每一项传给Expansion组件，保留下面这行props即可
          expansion={expansionName}
        />
      ))}
    </section>
  )
}
 
export default ExpansionView;