未为 document.querySelector 定义文档

Question

我正在尝试将来自我的 firebase 后端的数据呈现到我的网站上。我在 ../components/Storefront.js 中有一个函数

function Storefront(props) {
return (
<section>
<ul className="service-list"></ul>
</section>
}

在另一个文件 ../pages/storefront.js 中，我正在尝试将一个函数呈现给“服务列表”，

import Storefront from './../components/Storefront';
const servicelist = document.querySelector('.service-list');

function renderServices(doc){
  let li = document.createElement('li');
  let name = document.createElement('span');
  let description = document.createElement('span');

  li.setAttribute('data-id', doc.id);
  name.textContent = doc.data().name;
  description.textContent = doc.data().description;

  li.appendChild(name);
  li.appendChild(description);

  servicelist.appendChild(li);
}

但是，我不断收到指向我的文档未定义错误

const servicelist = document.querySelector('.service-list');

我尝试过 ('#service-list') 没有帮助。这是因为 querySelector 不适用于 JSX 而只能用于 HTML？任何建议将不胜感激！

Answer 1

我认为问题在于您的 const servicelist = document.querySelector... 行在文件范围内，这意味着它在文件加载时立即运行，这还为时过早，因为 DOM 尚未加载。尝试像这样更改代码的第一部分。

import Storefront from './../components/Storefront';
let servicelist;

function init() {
    console.log("Initializing");
    servicelist = document.querySelector('.service-list');
    // anything else you want to do on initialize
}

window.onload = init;

// The rest as you have it already.

这是一个很好的介绍：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload