时间戳

首页 > 解决方案 > 我正在尝试在功能组件中使用钩子，而它会引发意外的令牌解析错误。怎么了？

reactjs - 我正在尝试在功能组件中使用钩子，而它会引发意外的令牌解析错误。怎么了？

问题描述

我正在尝试在功能组件中使用反应钩子，但它似乎不起作用。在下文中，您将看到 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, setIsActive] = useDetectOutsideClick(dropdownRef, false);
     const onClick = () => setIsActive(!isActive);

怎么可能修复？

标签： reactjsreact-hooks

解决方案

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

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>

推荐阅读