HomeLập trìnhJavaScriptReact js không...

React js không thể đọc thuộc tính của ‘kiểu’ null trong javascript – JavaScript


mã javascript:

function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
      }
      
      function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
      }

đây là một dự án phản ứng, nó chủ yếu đưa ra lỗi này và các lỗi javascript khác. Vui lòng trợ giúp!!!


Nó có thể có nghĩa là document.getElementById("mySidenav") đang trở lại null và không phải là phần tử.

Nhưng chúng tôi cần xem nhiều mã hơn những gì bạn đã đăng để thực sự có thể trợ giúp. Bạn có GitHub với mã hoặc một số phiên bản trực tiếp mà chúng tôi có thể xem không?

không, tôi không có github nhưng tôi có thể đăng nó lên đây, đây là thành phần tiêu đề của tôi

import React from 'react'
import "./Header.css"
import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import ReactDOM from "react-dom"

function Header() {
    
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
      }
      
      function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
      }
    return (
        <nav className="Header">
            <img className="logo" src="https://forum.freecodecamp.org/t/react-js-cannot-read-property-of-null-style-in-javascript/./assets/logo.png" alt=""/>
            <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" className="closebtn" onClick={closeNav()}>&times;</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
            </div>
        </nav>
    )
}

export default Header

Bạn đang chạy () các closeNav chức năng trên lần tải đầu tiên, onClick={closeNav()}. Hãy thử chỉ chuyển chức năng onClick={closeNav}.



1 lượt thích

Chỉnh sửa: Tôi đã để lại câu trả lời bên dưới nhưng các câu trả lời khác thực hiện công việc chỉ với một thay đổi đơn giản, vì vậy bạn có thể không muốn xem phần này, trừ khi bạn muốn khám phá các cách tiếp cận khác.

Bạn chỉ có thể chơi với DOM – tức là document.getElementById("mySidenav") – một khi những yếu tố đó tồn tại. Và đó là khoảng thời gian sau khi quá trình kết xuất diễn ra trong React, vì nó cần chạy Kết xuất hơn là tìm cách cập nhật DOM, mã của bạn được chạy quá sớm trong chu kỳ.

Đọc thêm  Hàm bậc cao hơn trong JavaScript – Hướng dẫn cho người mới bắt đầu

Có 2 giải pháp tôi có thể nghĩ ra:

Một là sử dụng trạng thái để quản lý xem điều hướng có mở hay không, sau đó dựa trên trạng thái đó kết xuất:


function App() {
    
  const [navOpen, setNavOpen] = useState(true)

  function openNav() {
    setNavOpen(true);
  }
    
  function closeNav() {
    setNavOpen(false);
  }

  return (
      <nav className="Header">
          <img className="logo" src="https://forum.freecodecamp.org/t/react-js-cannot-read-property-of-null-style-in-javascript/./assets/logo.png" alt=""/>
          <div id="mySidenav" class="sidenav" style={{width: navOpen ? 250 : 0}}>
          <a href="javascript:void(0)" className="closebtn" onClick={() => closeNav()}>&times;</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
          </div>
      </nav>
  )
}

Cách khác, gần với cách tiếp cận của bạn hơn là sử dụng refs để lấy tham chiếu đến phần tử DOM. Một cái gì đó như thế này:

function App() {
    
  const divRef = useRef()

  function openNav() {
    divRef.current.style.width = 250;
  }
    
  function closeNav() {
    divRef.current.style.width = 0;
  }

  return (
      <nav className="Header">
          <img className="logo" src="https://forum.freecodecamp.org/t/react-js-cannot-read-property-of-null-style-in-javascript/./assets/logo.png" alt=""/>
          <div id="mySidenav" class="sidenav" ref={divRef}>
          <a href="javascript:void(0)" className="closebtn" onClick={() => closeNav()}>&times;</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
          </div>
      </nav>
  )
}

Xem https://reactjs.org/docs/refs-and-the-dom.html để biết thêm chi tiết.

Tôi nghĩ những gì @lasjorg nói chính xác là vấn đề. Trong React (JavaScript), bạn chỉ cần chuyển một con trỏ tới hàm mà bạn muốn gọi khi có sự kiện. Ngoại trừ đã làm điều này: onClick={ e => closeNav(e) }

Hầu hết các điểm của React là loại bỏ sự cần thiết phải làm điều này. JSX không phải là HTML, nó là một cú pháp cho phép bạn viết các hàm nhìn như HTML (và những chức năng đó, khi được xử lý bởi thư viện ReactDOM, dẫn đến HTML trông giống như JSX).

Để truy cập HTML đó bằng các phương thức DOM, bạn có thể nhảy qua các vòng như bạn đang cố gắng thực hiện. Giải pháp thứ hai từ @martinc chỉ cho chúng tôi cách thực hiện việc này, nhưng đây không phải là lý do chính đáng để sử dụng ref, nó làm phức tạp mã mà không có lý do chính đáng (bạn đang cố tình chống lại React). Rất có thể tại thời điểm này, bạn không cần phải bắt đầu sử dụng refs: bạn chỉ có thể điều chỉnh kiểu trực tiếp (như được hiển thị trong giải pháp đầu tiên) và đó là cách bạn nên viết logic này.

Đọc thêm  Giải thích sự kiện JavaScript Onclick

@DanCouper Tôi hoàn toàn đồng ý, đó không phải là cách làm việc của React. Tôi chỉ muốn chỉ ra vấn đề là gì.

Tôi rất muốn đề xuất rằng @oguzhanefe32 xem xét các cách khác nhau để tạo kiểu cho các thành phần React. Không chỉ có những cách tốt hơn mà còn có nhiều cách mạnh mẽ hơn để tạo kiểu cho các thành phần cho phép bạn sử dụng logic và trạng thái thành phần để tạo kiểu.



1 lượt thích

Vâng, vấn đề với việc trả lời những loại câu hỏi này là có nhiều câu trả lời tùy thuộc vào cấp độ mà bạn đang hướng tới.

Ở một cấp độ, có cách khắc phục nhanh: Sử dụng chức năng mũi tên để trì hoãn thực hiện cuộc gọi cho đến khi sự kiện xảy ra. Nó hoạt động! Công việc hoàn thành!

Nhưng OP bây giờ sẽ bị đau sau khi/nếu phần tử đó được hiển thị/ẩn dựa trên trạng thái hoặc đạo cụ và thứ đó có thể tồn tại hoặc không tồn tại hoặc được hiển thị lại sau khi nhấp hoặc bất cứ điều gì.

Đọc thêm  Ghi nhớ là gì? Cách thức và thời điểm ghi nhớ trong JavaScript và React

Vì vậy, thật tốt khi dạy cách tốt nhất, nhưng sau đó bạn phải tìm hiểu lý do tại sao. Tôi nghĩ câu nói của bạn “Phần lớn điểm của React là loại bỏ nhu cầu làm điều này.” đi vào cốt lõi của điều này, đó là những gì tôi muốn nói.

Tôi tự hỏi tại sao FCC lại để ai đó nghĩ như thế này, tôi tưởng tượng đó là vì bạn học thao tác DOM trước, bạn có chiếc búa hoạt động tốt, sau đó bạn học React, và bạn không được yêu cầu đặt búa xuống như bây giờ khi bạn đang sử dụng vít . Bạn có thể đóng một con vít vào và nó sẽ hoạt động, nhưng bạn có thể gặp sự cố sau này!



1 lượt thích

Tôi muốn làm rõ rằng việc gói trình xử lý bên trong một hàm ẩn danh là không bắt buộc trừ khi bạn cần chuyển một số đối số khác với sự kiện cho người xử lý. Nếu tất cả những gì bạn cần là sự kiện, bạn không cần phải bọc trình xử lý.

export default function App() {

  const handleClick = (event) => {
    console.log(event); // SyntheticBaseEvent
    console.log(event.target); // <button>Click me!</button>
  }
  return (
    <div className="App">
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}



1 lượt thích



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status