Javascript 是否存在括号运算符[]可能无法在react组件中与getElementsByClassName（）一起使用的原因？

我正在构建一个小的react应用程序，其中包含许多编程语言的课程列表。每个列表元素将包含一个背景图像，该背景图像由相应徽标的一个“sprite”png图像提供。我没有给每个div一个id，然后添加一个背景图像并设置图像的位置，而是给了所有div一个类

languages

，我将为它们快速设置背景url（），然后再定位

我曾尝试从外部样式表直接设置languages类的背景url，但由于某些原因，当它使用webpack构建时，链接无法到达我的public/images文件夹。我决定将它与我的组件文件链接

我遇到的问题是当我试图设置

const languageElements=document.getElementsByClassName（“语言”）

调用console.log（languageElements）时，我看到它返回一个HTMLCollection[]数组，我可以清楚地看到它的元素

然而，当我调用
console.log（languageElements[0]）
时，它意外地返回未定义的

我是不是遗漏了什么？这是否与反应有关

import React, { Component } from "react";
import "../styles/Center.scss";

class Center extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("Center Mounted Successfully.");
  }

  render() {
    const languageElements = document.getElementsByClassName("languages");
    console.log(languageElements);
    languageElements[0].style.background = "url(../images/full-languages.png)";

    return (
      <>
        <section>
          <ul>
            <li>
              CS1022: <span className="languages cpp" />
            </li>
            <li>
              CS1030:
              <span className="languages c" />
              <span className="languages cpp" />
            </li>
            <li>
              CS1410:
              <span className="languages html" />
              <span className="languages css" />
              <span className="languages js" />
            </li>
            <li>
              CS2350: <span className="languages java" />
            </li>
            <li>
              CS2420: <span className="languages java" />
            </li>
            <li>
              CS2550: <span className="languages sql" />
            </li>
          </ul>
        </section>
      </>
    );
  }
}
export default Center;

import React，{Component}来自“React”；
导入“./styles/Center.scss”；
类中心扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
log（“中心安装成功”）；
}
render（）{
const languageElements=document.getElementsByClassName（“语言”）；
log（languageElements）；
languageElements[0].style.background=“url（../images/full languages.png）”；
返回(


CS1022：


CS1030：


CS1410：


CS2350：


CS2420：


CS2550：


);
}
}
导出默认中心；

我希望使用括号运算符可以访问HTMLCollection[]getElementsById（）返回中的每个元素。
您应该在

此选择器发生在render（）方法内部，而未呈现任何内容，因此languageElements将变为空。尝试将代码放在componentDidMount（）
当第一次呈现时，页面上有该类的元素吗？因为您的数组在索引[0]上是空的，所以它给出了UndefinedAllo所以
和
应该做什么？（也许这是一种反应。）@Pointy当它呈现时，此列表显示在页面上。当console.log（languageElements）出现时，它也会显示一个完整的9数组elements@Pointy另外，我真的可以暂时不使用
和
，因为它已经被包装在一个部分中，我通常在我的所有组件中都有它们，所以如果它变长，我会记得组件结束的位置
const languageElements = document.getElementsByClassName("languages");