时间戳

首页 > 解决方案 > 是否有理由括号运算符 [] 可能无法在反应组件中与 getElementsByClassName() 一起使用？

javascript - 是否有理由括号运算符 [] 可能无法在反应组件中与 getElementsByClassName() 一起使用？

问题描述

我正在构建一个小型反应应用程序，其中包含许多编程语言和课程的列表。每个列表元素将包含一个背景图像，该背景图像由其相应徽标的一个“精灵”png 图像提供。我没有给每个 div 一个 id 来添加背景图像并设置图像的位置，而是给了所有这些类languages，我将为其快速设置背景 url() 然后定位。

我试图从我的外部样式表中直接设置语言类的背景 url，但是当它使用 webpack 构建时，由于某种原因，链接不会到达我的 public/images 文件夹。我决定将其与我的组件文件链接起来。

我遇到的问题是当我尝试设置 const languageElements = document.getElementsByClassName("languages");

调用 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;

我希望使用括号运算符允许我访问 HTMLCollection[] getElementsById() 返回中的每个元素。

标签： javascripthtmlcssreactjs

解决方案

您应该在https://reactjs.org/docs/react-component.html了解 React 组件生命周期 

const languageElements = document.getElementsByClassName("languages");

这个选择器发生在 render() 方法中，没有渲染，所以 languageElements 将变空。尝试将您的代码放在 componentDidMount()

推荐阅读