javascript - 在 React 中使用 querySelector

Question

querySelector返回null（可能是因为未创建元素），我尝试了事件DOMContentLoaded和ReactDOM.findDOMNode

const Header = () => {
  const links = document.querySelector('.header_links')
    window.addEventListener('resize',() => {
      if(window.innerWidth <=1000 ){
        links.classList.remove('hide');
      }
    })
  return (
      <header className="App-header">
        <div className="inner-header">
          <div className="header_links">
          <div className="header_left_links">
            <a href="index.html" className="active">DrukBox</a>
            <a href="printfile.html">Print File</a>
            <a href="history.html">History</a>
            <a href="addpages.html">Add pages</a>
          </div>
          <div className="header_right_links">
            <a href="/">Sign in</a>
          </div>
          </div>
          <BurgerMenu />
        </div>
      </header>
  );
}

标签： javascriptreactjsdom

Answer 1

或者你可以使用没有引用的状态。

const Header = () => {
  const [isHiddenLinks, setIsHiddenLink] = React.useState(true);

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth <= 1000) {
        setIsHiddenLink(false);
      }
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [isHiddenLinks]);

  return (
    <header className="App-header">
      <div className="inner-header">
        <div className={`header_links ${isHiddenLinks ? "hide" : ""}`}>
          <div className="header_left_links">
            <a href="index.html" className="active">
              DrukBox
            </a>
            <a href="printfile.html">Print File</a>
            <a href="history.html">History</a>
            <a href="addpages.html">Add pages</a>
          </div>
          <div className="header_right_links">
            <a href="/">Sign in</a>
          </div>
        </div>

        <BurgerMenu />
      </div>
    </header>
  );
};