我的 nextjs 项目中的信号存在一些问题

Question

"use client";
import React, { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Route, routeCollection } from "../../data/route";
import { IonIcon } from "@ionic/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  linkAppearAnimationVariant,
  linkContainerAnimationVariants,
  navScreenVariant,
} from "../../animation/navbarVariants";
import { signal } from "@preact/signals";

const isNavOpen = signal<boolean>(false);

const MobileNav = () => {
  // const [isNavOpen, setIsNavOpen] = useState(false);
  const pathname = usePathname();

  return (
    <>
      {!isNavOpen && (
        <div
          className="fixed right-12 top-12 md:hidden text-neutral-50"
          onClick={() => {
            isNavOpen.value = true;
          }}
        >
          Open
        </div>
      )}
      <AnimatePresence>
        {isNavOpen && (
          <motion.div
            variants={navScreenVariant}
            initial="initial"
            animate="animate"
            exit="exit"
            className="w-full h-full flex flex-col justify-between absolute origin-top bg-main backdrop-blur-md md:hidden text-neutral-50 p-8"
          >
            <motion.div className="flex justify-between p-4 items-center">
              <motion.p className="font-bold text-lg">Ayush</motion.p>
              <motion.p
                onClick={() => {
                  isNavOpen.value = false;
                }}
              >
                Close
              </motion.p>
            </motion.div>
            <motion.div
              variants={linkContainerAnimationVariants}
              initial="initial"
              animate="animate"
              exit="initial"
              className="flex flex-col justify-between items-center gap-4"
            >
              {routeCollection.map((eachRoute, index) => (
                <div className="overflow-hidden">
                  <LinkRender
                    key={index}
                    eachRoute={eachRoute}
                    pathName={pathname}
                    closeTab={() => {
                      isNavOpen.value = false;
                    }}
                  />
                </div>
              ))}
            </motion.div>
            <motion.a
              href="mailto:[email protected]"
              className="underline underline-offset-2 text-center"
            >
              Contact Me
            </motion.a>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

const LinkRender = ({
  eachRoute,
  pathName,
  closeTab,
}: {
  eachRoute: Route;
  pathName: string;
  closeTab: () => void;
}) => {
  return (
    <motion.div variants={linkAppearAnimationVariant} onClick={closeTab}>
      <Link href={eachRoute.address}>
        <motion.div
          className={`flex gap-2 items-center font-bold text-md ${
            pathName === eachRoute.address ? "text-extraLight" : ""
          }`}
        >
          <IonIcon icon={eachRoute.iconText}></IonIcon>
          <span>{eachRoute.name}</span>
        </motion.div>
      </Link>
    </motion.div>
  );
};

export default MobileNav;

上面的代码是我的下一个 js 组件之一
现在问题出在这段代码上

{!isNavOpen && (
        <div
          className="fixed right-12 top-12 md:hidden text-neutral-50"
          onClick={() => {
            isNavOpen.value = true;
          }}

只有这段代码在这一行抛出错误

isNavOpen.value = true;

在其他地方它不会抛出错误，我无法使用取消按钮

我第一次尝试预反应/信号

我尝试了这段代码

const isNavOpen = signal<boolean>(false) as {value: boolean};

我也尝试过这个分离整个功能

const stateChange_isNavOpen = (newState: boolean) => {
  isNavOpen.value = newState;
};

现在它没有抛出任何错误，但整个功能不起作用

Answer 1

您使用的是 Preact 信号绑定，而不是 React 的。

如果您尝试在 React 中使用它们，请遵循 安装说明并使用

@preact/signals-react

。