如何在使用节点 js 时运行 document.getelementbyclassname()

Question

我正在学习节点 js，并且我试图在将鼠标悬停在 header 中的 link 上时显示一个大型菜单。我知道 'document.getElementByClassName' 不会因为 ssr 而工作，但我不知道我的问题的解决方案。

我尝试过使用文档中的动态导入，但不太了解如何将其实现到我的代码中。下面是图片。

image

Answer 1

如果您使用的是当前版本的 nextjs，当您的页面组件不动态加载任何内容时，您不必担心 SSR。由于您是初学者，请将 _app.js 和 _document.js 保留为默认值。

在 pages 文件夹之外创建一个名为 components 的文件夹。在该文件夹中创建一个名为 Base.js 的文件并粘贴此代码

import React, {
  useState
} from "react";

const Menu = () => {
  const [hide, setHide] = useState(true);

  const showMenu = (e) => {
    e.preventDefault();
    setHide(false);
  };

  const hideMenu = (e) => {
    e.preventDefault();
    setHide(true);
  };

  return ( <
    div className = "container" >
    <
    div className = "dropdown"
    onMouseEnter = {
      showMenu
    }
    onMouseLeave = {
      hideMenu
    } >
    Menu <
    /div> <
    ul className = "menu-area"
    style = {
      {
        display: hide ? "none" : "block"
      }
    } >
    <
    li > Home < /li> <
    li > Home < /li> <
    li > Home < /li> <
    li > Home < /li> < /
    ul > <
    /div>
  );
};

const Base = ({
  children
}) => {
  return ( <
    div >
    <
    Menu / > {
      children
    } <
    /div>
  );
};

export default Base;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

现在您可以将 Base 组件导入到所有其他组件，并将这些组件中的所有内容包装在 Base 组件内，就像这样 -> <Base> /*your code */</Base>

如何在使用节点 js 时运行 document.getelementbyclassname()

how to run document.getelementbyclassname() while using node js

node.js

server-side-rendering

如何在使用节点 js 时 运行 document.getelementbyclassname()

how to run document.getelementbyclassname() while using node js

node.js

server-side-rendering

如何在使用节点 js 时运行 document.getelementbyclassname()