Next.js 的自定义脚本

Question

在 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>
  );
};

希望这能让你走上正轨