Question

使用 Next.js 的自定义脚本

2021-04-26

493

javascript reactjs express next.js

在 Next.js 中为滑入式菜单创建类切换函数的正确方法是什么？

我创建了一个菜单，它具有可切换的滑入功能。有一个按钮可以切换类“切换”，然后菜单从侧面滑入。我不确定在使用 React/Next.js 时这种方法本身是否错误，在这种情况下，我希望有替代方案。

因此，通常我会在页脚的某个地方内联我的切换脚本，以获得最佳速度。这是一个非常小的脚本，因此不需要包含在单独的文件中。我只是不知道在使用 Next.js 时应该把这个脚本放在哪里。

我读到过你可以使用 next/head 并将代码放在单独的文件中，并在那里正常包含该文件，但这对我来说听起来并不是很理想。这会创建一个单独的请求，并使整个过程比它需要的慢。而且，如果需要以这种方式完成，如果您想这样做，您将如何预加载/推送它？

Answer 1

创建一个 React 组件 - 逻辑将驻留在其中。无需像平常一样拥有单独的脚本文件

import React, { useState } from 'react';

const Menu = () => {
  const [toggled, setToggled] = useState(false);

  const class_name = toggled ? 'menu--toggled' : 'menu';

  return (
    <div className={class_name} onClick={setToggled(!toggled)}>
      <div>Menu Item 1</div>
      <div>Menu Item 2</div>
    </div>
  );
};

希望这能让您走上正确的道路