Question

在 React 中样式化时出现未定义的“宽度”错误

2021-03-23

1102

javascript html css reactjs

我正在做我的 react 项目来创建侧面导航栏。

所以我有这个按钮，点击该按钮侧面导航栏应该打开。

<button className="openbtn" onClick={(e) => openNav(e)}>&#9776; Open Sidebar</button>

这是我的 openNav 函数

  function openNav() {
    console.log("open nav")
    document.getElementsByClassName("sidenav").style.width = "250px";
    document.getElementsByClassName("test").style.marginLeft = "250px";
  }

当我这样做时，我收到此错误

Uncaught TypeError: Cannot set property 'width' of undefined

我的侧边栏样式看起来像

 .sidenav {
     margin-top: 50px;
    height:100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    padding-top: 20px;
    font-size: 15px;
  }

在 css 文件中，sidenav 和 test 都具有 width 属性。

那么如何解决这个问题呢？

这在普通的 html/css/javascript 中有效，如何在 react 中做到这一点？

Answer 1

document.getElementsByClassName("sidenav") 是 HTMLCollection 。您需要迭代每个元素并为它们指定样式。

let sideNav = document.getElementsByClassName("sidenav")
for(let i = 0; i < sideNav.length; i++)
   sideNav[i].style.width = "250px"

Answer 2

document.getElementsByClassName 返回多个元素。因此，您不能只写 .style.width`。相反，您需要运行循环。

const navEl = document.getElementsByClassName("sidenav")
for (var i = 0; i < navEl.length; i++) {
    navEl[i].style.width= "250px";
}

或者您只对一个元素感兴趣，请使用

document.getElementsByClassName("sidenav")[0].style.width= "250px"

最后，您输入的问题是 getElementsByClassNamed("test") 。在 ClassName 后面有一个额外的 d 。

Answer 3

使用 getElementsByClassName() ，您指的是集合。将数组中的第一个数字指定为 [0] 。尝试此代码：

function openNav() {
    console.log("open nav")
    document.getElementsByClassName("sidenav")[0].style.width = "250px";
    document.getElementsByClassName("test")[0].style.marginLeft = "250px";
}