React中访问HTMLCollection返回null，如何获取各Tab标题？

嘿，我来帮你搞定这个问题～在React里，其实咱们不用直接去操作HTMLCollection这种DOM集合，用数据驱动的方式会更贴合React的设计思路，当然如果确实有特殊需求要从DOM里取内容，也有规范的做法，我给你两种可行方案：

方案一：数据驱动（推荐） #

这是React最提倡的做法——把Tab标题作为组件内的数据，渲染视图时直接基于数据生成，想要获取标题直接用这个数据数组就行，完全不用碰DOM：

import React, { Component } from 'react';

// 注意组件名首字母要大写哦，React规范要求
class Tabs extends Component {
  // 把所有Tab标题存在数组里，作为视图的数据源
  tabTitles = ['Class 1', 'Class 2', 'Class 3', 'Class 4'];

  render() {
    return (
      <div className="tabs">
        <ul>
          {/* 用map循环渲染Tab，数据和视图自动绑定 */}
          {this.tabTitles.map((title, index) => (
            <li key={index}>
              <a>{title}</a>
            </li>
          ))}
        </ul>
      </div>
    );
  }

  // 想要获取所有Tab标题时，直接调用这个方法就行
  getTabTitles() {
    return [...this.tabTitles]; // 返回拷贝避免外部修改原数据
  }
}

这种方式的好处是：数据是视图的唯一来源，永远不会出现DOM和数据不一致的情况，后续要新增/修改Tab标题，只需要更新数组即可，维护起来特别方便。

方案二：通过Ref获取DOM元素（特殊场景可用） #

如果因为某些原因必须从DOM中提取标题，可以用React的createRef来安全地获取DOM元素，而不是直接去全局查询DOM：

import React, { Component } from 'react';

class Tabs extends Component {
  // 创建一个ref，用来绑定到ul元素上
  tabListRef = React.createRef();

  componentDidMount() {
    // 组件挂载完成后（DOM已渲染），通过ref获取ul元素
    const ulElement = this.tabListRef.current;
    // 获取所有a标签，得到HTMLCollection
    const aElements = ulElement.getElementsByTagName('a');
    // 把集合转成数组，再提取每个a标签的文本内容
    const tabTitles = Array.from(aElements).map(item => item.textContent);
    console.log('所有Tab标题:', tabTitles);
  }

  render() {
    return (
      <div className="tabs">
        {/* 把ref绑定到ul上 */}
        <ul ref={this.tabListRef}>
          <li><a>Class 1</a></li>
          <li><a>Class 2</a></li>
          <li><a>Class 3</a></li>
          <li><a>Class 4</a></li>
        </ul>
      </div>
    );
  }
}

⚠️ 注意：这种方式要依赖DOM渲染完成的时机，只有在componentDidMount（首次渲染）或componentDidUpdate（更新后）里才能拿到正确的DOM元素，而且如果Tab内容是动态变化的，还需要在更新时重新获取，所以除非必要，优先用方案一。

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