Блог

Главная - Вопросы по программированию - Есть ли причина, по которой операторы скобок [] могут не работать с getElementsByClassName() в компоненте react?

Есть ли причина, по которой операторы скобок [] могут не работать с getElementsByClassName() в компоненте react?

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Я создаю небольшое приложение react, содержащее список многих языков программирования с курсами. Каждый элемент списка будет содержать фоновое изображение, предоставляемое одним «спрайтовым» png-изображением соответствующего логотипа. Вместо того, чтобы присвоить каждому div идентификатор, чтобы затем добавить фоновое изображение и установить положение изображения, я дал всем им класс languages , для которого я быстро установлю фоновый URL(), а затем расположу после.

Я попытался напрямую установить фоновый URL-адрес класса languages из моей внешней таблицы стилей, но по какой-то причине ссылка не попадет в мою общедоступную папку / изображения, когда она будет собрана с помощью webpack. Вместо этого я решил связать его с моим файлом компонента.

Проблема, с которой я сталкиваюсь, заключается в том, что я пытаюсь установить const languageElements = document.getElementsByClassName("languages");

При вызове console.log(languageElements) я вижу, что он возвращает массив HTMLCollection[], для которого я могу четко видеть свои элементы.

Однако, когда я вызываю console.log(languageElements[0]) , он неожиданно возвращает undefined .

Я что-то здесь упускаю? Связано ли это с react?

 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().

Комментарии:

1. При первом рендеринге есть ли какие-либо элементы на странице с этим классом?

2. поскольку ваш массив пуст по индексу [0], поэтому его значение не определено

3. Также, что <> и </> предполагается делать? (Возможно, это связано с React.)

4. @Pointy при рендеринге этот список отображается на странице. Также, когда console.log(languageElements) показывает полный массив из 9 элементов

5. @Pointy кроме того, я действительно мог бы просто оставить <> и </> на данный момент, поскольку он уже заключен в раздел, обычно они есть во всех моих компонентах, поэтому я помню, где заканчивается компонент, если он становится длинным

Ответ №1:

Вы должны узнать о жизненном цикле компонента React наhttps://reactjs.org/docs/react-component.html

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

Этот селектор произошел внутри метода render(), в то время как ничего не отображалось, поэтому languageElements станет пустым. Попробуйте поместить свой код в componentDidMount()