Javascript 无法读取属性'；风格'；零反应_Javascript_Css_Reactjs

Javascript 无法读取属性'；风格'；零反应

javascript css reactjs

Javascript 无法读取属性'；风格'；零反应,javascript,css,reactjs,Javascript,Css,Reactjs,当我使用以下代码为侧栏添加组件时，我没有反应，我得到了错误：无法读取null的属性“style” 有什么问题如果有人能提供帮助，这将是非常可观的。使用document.getElement…似乎是一种反模式-有关参考的用法，请参阅refs REF提供了一种访问DOM节点或对在render方法中创建的元素进行反应的方法您可能还希望跟踪状态中的宽度，这样您就可以使用setState更新宽度，并让JSX中的style属性反映状态中的宽度。不要直接调用方法，而是传递方法引用尝试将onclick=

当我使用以下代码为侧栏添加组件时，我没有反应，我得到了错误：

无法读取null的属性“style”

有什么问题

如果有人能提供帮助，这将是非常可观的。

使用

document.getElement…

似乎是一种反模式-有关

参考的用法，请参阅refs

REF提供了一种访问DOM节点或对在render方法中创建的元素进行反应的方法
您可能还希望跟踪状态中的宽度
，这样您就可以使用setState
更新宽度，并让JSX中的style
属性反映状态中的宽度。
不要直接调用方法，而是传递方法引用
尝试将onclick={this.openNav（）}
更改为onclick={this.openNav}

及
onclick={this.closeNav（）}
toonclick={this.closeNav}

另外您的JSX代码在render（）方法中不正确。试试这个：

render（）{
返回(
侧导航推送示例

单击下面的元素打开侧面导航菜单，然后
将此内容向右推。

☰；开放
);
}
在编写onclick={this.openNav（）}时，调用函数而不是将其传递给prop。
它在组件安装之前的渲染阶段调用，因此元素不存在。
要修复它，您应该传递一个函数。简单地做：
onclick={this.openNav}
onclick={this.closeNav}

正如我在您的原始帖子下的评论，不建议您以这种方式添加样式。您应该改用state。对于你的问题，是你的绑定问题，应该是这样的
 <a href="javascript:void(0)"
    class="closebtn"
    onclick={this.closeNav}
 >



您的另一个元素也是如此，您正试图使用vanilla JS环境中的反模式来获取DOM节点上的链接。有关引用的用法，请参见React
因为React有自己的DOM导航环境，所以应该只使用它。按如下方式更新代码：
import React, { Component } from "react";
import "../css/sidebar.css";

class Sidebar extends Component {
  constructor(props){
      super(props)

      this.state = {}

      this.mySidenav = React.createRef()
      this.main = React.createRef()
  }

  openNav() {
    this.mySidenav.current.style.width = "250px";
    this.main.current.style.marginLeft = "250px";
  }

  closeNav() {
    this.mySidenav.current.style.width = "0";
    this.main.current.style.marginLeft = "0";
  }

  render() {
    return (
      <div>
        <div id="mySidenav" ref={this.mySidenav} class="sidenav">
          <a
            href="javascript:void(0)"
            class="closebtn"
            onclick={this.closeNav}
          >
            &times;
          </a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>

        <div id="main" ref={this.main}>
          <h2>Sidenav Push Example</h2>
          <p>
            Click on the element below to open the side navigation menu, and push this content to the right.
          </p>
          <span
            styles={{ fontSize: "30", cursor: "pointer" }}
            onclick={this.openNav}
          >
            &#9776; open
          </span>
        </div>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导入“./css/sidebar.css”；
类边栏扩展组件{
建造师（道具）{
超级（道具）
this.state={}
this.mySidenav=React.createRef（）
this.main=React.createRef（）
}
openNav（）{
this.mySidenav.current.style.width=“250px”；
this.main.current.style.marginLeft=“250px”；
}
closeNav（）{
this.mySidenav.current.style.width=“0”；
this.main.current.style.marginLeft=“0”；
}
render（）{
返回(
侧导航推送示例

单击下面的元素打开侧面导航菜单，并将此内容向右推。

☰；开放
);
}
}
首先，在DOM完全加载之前，无法访问document元素，因此您需要添加一项检查，检查元素是否已加载：
class Sidebar extends React.Component {
  state = {};

  //Here you are not binding your methods nor you are using the ES6 Arrow function so you need to change the code here also.
  openNav = () => {
    if (
      document.getElementById("mySidenav") &&
      document.getElementById("main")
    ) {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
    }
  };

  closeNav = () => {
    if (
      document.getElementById("mySidenav") &&
      document.getElementById("main")
    ) {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft = "0";
    }
  };

  render() {
    return (
      <div>
        <div id="mySidenav" class="sidenav">
           //Here you are calling the function on initial render that is why you are getting the error. you need to pass the function like this in order to trigger it on an event.
          <a href="javascript:void(0)" class="closebtn" onclick={this.closeNav}>
            &times;
          </a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>

        <div id="main">
          <h2>Sidenav Push Example</h2>
          <p>
            Click on the element below to open the side navigation menu, and
            push this content to the right.
          </p>
          <span
            styles={{ fontSize: "30", cursor: "pointer" }}
            //Same as above here also
            onclick={this.openNav}
          >
            &#9776; open
          </span>
        </div>
      </div>
    );
  }
}

类侧栏扩展了React.Component{
状态={}；
//在这里，您既没有绑定方法，也没有使用ES6 Arrow函数，因此也需要更改此处的代码。
openNav=（）=>{
如果(
document.getElementById（“mySidenav”）&&
document.getElementById（“main”）
) {
document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
}
};
closeNav=（）=>{
如果(
document.getElementById（“mySidenav”）&&
document.getElementById（“main”）
) {
document.getElementById（“mySidenav”）.style.width=“0”；
document.getElementById（“main”）.style.marginLeft=“0”；
}
};
render（）{
返回(
//这里是在初始渲染时调用函数，这就是为什么会出现错误。您需要像这样传递函数，以便在事件中触发它。
侧导航推送示例

单击下面的元素打开侧面导航菜单，然后
将此内容向右推。

☰；开放
);
}
}

修正后的部件如下所示。
您应该会看到ES6和类的一些概念。
在加载DOM之前无法访问文档元素，因此您需要检查元素是否已加载
    if (
  document.getElementById("mySidenav") &&
  document.getElementById("main")
) {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

或者使用hook-useffect（）
您正在尝试将JS写入JSX？我认为这是不可能的。REACT有一个虚拟的DOM。因此，您的代码可能无法正常工作（按预期方式）。另外，您可以通过基于特定组件状态添加和删除类，在react中非常简单地处理这个问题，对吗？您使用的方式不是react方式。您应该将样式值存储到状态中，并显示在您的elementshow中，我可以将“”中指定的html代码转换为react组件吗？我按照您的建议执行了操作，但当我单击我不理解的打开按钮时，侧边栏不会出现！当我像你说的那样做时，它显示错误，比如在this.mySidenav.current.style.width=“250px”上“无法读取未定义的属性'mySidenav'”；如何将“w3schools.com/howto/tryit.asp”中指定的html代码转换为react组件如何将“w3schools.com/howto/tryit.asp”中指定的html代码转换为react组件如何将“w3schools.com/howto/tryit.asp”中指定的html代码转换为react组件如何将“w3schools.com/howto/tryit.asp”中指定的html代码转换为react组件使成分发生反应。我按照你的建议做了，但是当我点击我不理解的打开按钮时，边栏没有出现！找到解决办法了吗？
class Sidebar extends React.Component {
  state = {};

  //Here you are not binding your methods nor you are using the ES6 Arrow function so you need to change the code here also.
  openNav = () => {
    if (
      document.getElementById("mySidenav") &&
      document.getElementById("main")
    ) {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
    }
  };

  closeNav = () => {
    if (
      document.getElementById("mySidenav") &&
      document.getElementById("main")
    ) {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft = "0";
    }
  };

  render() {
    return (
      <div>
        <div id="mySidenav" class="sidenav">
           //Here you are calling the function on initial render that is why you are getting the error. you need to pass the function like this in order to trigger it on an event.
          <a href="javascript:void(0)" class="closebtn" onclick={this.closeNav}>
            &times;
          </a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>

        <div id="main">
          <h2>Sidenav Push Example</h2>
          <p>
            Click on the element below to open the side navigation menu, and
            push this content to the right.
          </p>
          <span
            styles={{ fontSize: "30", cursor: "pointer" }}
            //Same as above here also
            onclick={this.openNav}
          >
            &#9776; open
          </span>
        </div>
      </div>
    );
  }
}

    if (
  document.getElementById("mySidenav") &&
  document.getElementById("main")
) {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

useEffect(() => {
  document.getElementById("togBtn").style.cursor = "pointer";
   }, []);