Question

我正在尝试在我的 React 项目中制作一个动态进度条。我有一个自己的 js 文件和我的进度条，我将栏中的元素标记为完成的方式是通过向进度条文件中的列表元素添加一个类名“活动”。这是通过在进度条文件中声明的函数完成的（见代码）。我还有一个包含三个不同页面的表单。问题是，当我转到第二页并尝试将栏的第一部分标记为已完成时，我收到 TypeError: Cannot read property 'classList' of null。我知道这是因为 getElementById 返回 undefined 但我不明白为什么，因为我在表单中的每个页面的开头声明了 Progressbar 函数。我的代码：

Progressbar.js：

import React from "react";
import "./Progressbar.css";

export const goForward = (name) => {
  var element = document.getElementById(name);
  element.classList.add("active");
};
export const goBackward = (name) => {
  var element = document.getElementById(name);
  element.classList.remove("active");
};

function Progressbar() {
  return (
    <div>
      <ul className="progressBar">
        <li id="step1">Project</li>
        <li id="step2">Part</li>
        <li id="step3">Profile</li>
      </ul>
    </div>
  );
}

export default Progressbar;

第二个表单页面的开始：

import Progressbar from "./Progressbar";
import { goForward, goBackward } from "./Progressbar";
return (
    <>
      <Progressbar />
      {goForward("step1")}

“无法读取空错误的属性‘classList’

0 个答案: