Codepen возвращает пустой массив при ожидании нескольких элементов - PullRequest
Новая
       10

Codepen возвращает пустой массив при ожидании нескольких элементов

1 голос
/ 12 июля 2019

Я пытаюсь записать в журнал переменную, которая должна содержать массив. Однако в Codepen он возвращает пустой массив. Я ожидаю, что он вернет содержимое элемента списка.

Вот кодекс вместе с некоторым фрагментом кода:

Кстати, это проект React, поэтому я использую className вместо class.

HTML 

      <ul className="nav">
        <li>
          <a>Products</a>

          <div className="subnav-block">
            <ul>
              <li>
                <a>Product A</a>
              </li>
              <li>
                <a>Product B</a>
              </li>
            </ul>
          </div>
        </li>
      <li>
      <a>About</a>

      <div className="subnav-block">
        <ul>
          <li>
            <a>About Us</a>
          </li>
          <li>
            <a>Press</a>
          </li>
        </ul>
      </div>
    </li>
      </ul>

JS 

const nav = document.querySelectorAll('.nav > li');

console.log(nav)

Codepen возвращается: 

[Object NodeList] {Length: 0}

Ответы [ 2 ]

1 голос
/ 12 июля 2019

Если это приложение для реагирования, убедитесь, что вы вызываете код в правильном месте, чтобы dom действительно обновлялся с вашей разметкой перед вызовом запроса.Если вы используете компонент класса, переместите ваш код внутрь componentDidMount

componentDidMount() {
  const nav = document.querySelectorAll(".nav > li");
  console.log(nav);
}

Если вы используете хуки, поместите его внутрь useEffect

useEffect(() => {
  const nav = document.querySelectorAll('.nav > li')
  console.log(nav)
}, [])

, вот рабочий пример с использованием хуков: https://codesandbox.io/s/currying-monad-t6104?fontsize=14

0 голосов
/ 12 июля 2019

Потому что className - это не то, как вы добавляете класс HTML, а просто class. 

const nav = document.querySelectorAll(".nav > li");

console.log(nav);
<ul class="nav">
  <li>
    <a>Products</a>

    <div class="subnav-block">
      <ul>
        <li>
          <a>Product A</a>
        </li>
        <li>
          <a>Product B</a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <a>About</a>

    <div class="subnav-block">
      <ul>
        <li>
          <a>About Us</a>
        </li>
        <li>
          <a>Press</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

Чтобы продолжать использовать className, используйте селектор атрибута: 

const nav = document.querySelectorAll("[className='nav'] > li");

console.log(nav);
<ul className="nav">
  <li>
    <a>Products</a>

    <div className="subnav-block">
      <ul>
        <li>
          <a>Product A</a>
        </li>
        <li>
          <a>Product B</a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <a>About</a>

    <div className="subnav-block">
      <ul>
        <li>
          <a>About Us</a>
        </li>
        <li>
          <a>Press</a>
        </li>
      </ul>
    </div>
  </li>
</ul>
...