我试图在函数组件中使用钩子，同时它抛出意外的令牌解析错误怎么了？

如何解决我试图在函数组件中使用钩子，同时它抛出意外的令牌解析错误怎么了？

我正在尝试在功能组件中使用 react 钩子，但它似乎不起作用。在下面，您将看到 ref 在哪里被使用...

    import React,{ useRef } from "react";
    import { useDetectOutsideClick } from "./useDetectOutsideClick";
    
    import './Header.scss';
    
    const Header = ({ handleChange,type,...otherProps }) => (
    
     const dropdownRef = useRef(null);
     const [isActive,setIsActive] = useDetectOutsideClick(dropdownRef,false);
     const onClick = () => setIsActive(!isActive);
    
      <nav className="navbar" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
          <a className="navbar-item" href="https://bulma.io">
            <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/>
          </a>
    ...
          <div onClick={onClick}  ref={dropdownRef}
          className={`navbar-item has-dropdown ${isActive ? "active" : "inactive"}`} >
          <a className="navbar-link">
            More
          </a>

          <div className="navbar-dropdown">
            <a className="navbar-item">
              About
            </a>
            <a className="navbar-item">
              Jobs
            </a>
            <a className="navbar-item">
              Contact
            </a>

            <a className="navbar-item">
              Report an issue
            </a>


  </div>
  </div>
    ...

它在以下几行中引发解析错误：

     const dropdownRef = useRef(null);
     const [isActive,false);
     const onClick = () => setIsActive(!isActive);

如何修复？

解决方法

我认为您需要将您的活动内容放在这样的对象中：

import React,{ useRef } from "react";
import { useDetectOutsideClick } from "./useDetectOutsideClick";

import './Header.scss';

const Header = ({ handleChange,type,...otherProps }) => (

 const dropdownRef = useRef(null);
 const [isActive,setIsActive] = useDetectOutsideClick({
    dropdownRef: "",active: false
 });
 const onClick = () => setIsActive({
  dropDownRef: dropdownRef,active: !isActive.active
 });

  <nav className="navbar" role="navigation" aria-label="main navigation">
    <div className="navbar-brand">
      <a className="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/>
      </a>

      <a role="button" className="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
...

还要确保将 ref 标签添加到您的元素中：

<nav>
  <Dropdown ref={dropDownRef}>
    //stuff
  </Dropdown>
</nav>

,

here 是关于如何使用 useOnClickOutside 钩子以及如何编写它的文档。

我相信你的 useDetectClickOutside 钩子有问题，如果有可能有帮助的代码。