使用React Hooks的可重用下拉菜单

  • Z时代
  • 2024-01-10
  • 分类：问答

正如我从React文档中获得的那样，使用钩子不需要大量的代码重构，并且可以轻松地将其包含在现有代码中。我想使可重用的下拉列表，从反应组件渲染方法调用。这是我的代码：

//navigation.js
import {DropdownToggler} from './dropdown.js';
export class ErrorTriangle extends Component {
   render(){
     return(
        {DropdownToggler({uiElement: {
            toggler: <img src={MyImg}/>,
            field: <div className={'errorMessage'}>
                       <p>Dropdown content</p>
                   </div >
        }})
       }
     )
   }
}
//dropdown.js
import React, {useEffect, useRef, useState} from "react";
import {store} from "../api/redux/store";
const DropdownToggler = (props) => {
    const myRef = useRef(null);
    const [showField, setShow] = useState(false);
    const isMobile = store.getState().isMobile;
   const remove = (e) => {
    e.stopPropagation();
    if (myRef && myRef.current.contains(e.target)) {
        return
    }
    setShow(false);
    if (isMobile===true) {
        document.removeEventListener('touchend', remove, false)
    } else {
        document.removeEventListener('mouseup', remove, false)
    }
};
const show = (e) => {
    e.stopPropagation();
    if (showField) {
        return
    }
    setShow(true);
    if (isMobile===true) {
        document.addEventListener('touchend', remove, false)
    } else {
        document.addEventListener('mouseup', remove, false)
    }
};
return (
    <>
        {React.cloneElement(props.uiElement.toggler, {
            onTouchEnd: (e) => show(e),
            onMouseUp: isMobile ? null : (e) => show(e)
        })}
        {showField ? React.cloneElement(props.uiElement.field, {ref: node => myRef.current= node}) : null}
    </>
)
};
export {DropdownToggler};

并得到错误：只能在函数组件的主体内部调用挂钩。我已经检查了有关此问题的现有信息：

  1. react-hot-loader版本是4.8.0

  2. 我的react和react-dom是同一版本16.8.4;

  3. 我的babel-config包含：

        'use strict';
    module.exports = {
       presets: ['@babel/preset-env', '@babel/preset-react'],
       plugins: ["@babel/plugin-proposal-class-properties", "jsx-control-statements", "react-hot-loader/babel"],
    };

也许问题是我违反了钩子规则https://reactjs.org/warnings/invalid-hook-call-

warning.html。将不胜感激详细的解释（示例）或想法。

回答：

更改

export class ErrorTriangle extends Component {
   render(){
     return(
        {DropdownToggler({uiElement: {
            toggler: <img src={MyImg}/>,
            field: <div className={'errorMessage'}>
                       <p>Dropdown content</p>
                   </div >
        }})
       }
     )
   }
}

至

export function ErrorTriangle (props) {
     return(
        {DropdownToggler({uiElement: {
            toggler: <img src={MyImg}/>,
            field: <div className={'errorMessage'}>
                       <p>Dropdown content</p>
                   </div >
        }})
       }
     )
}

更改

{DropdownToggler({uiElement: {
            toggler: <img src={MyImg}/>,
            field: <div className={'errorMessage'}>
                       <p>Dropdown content</p>
                   </div >
        }})
       }

至

{<DropdownToggler uiElement={{
    toggler: <img src={MyImg}/>,
    field: <div className={'errorMessage'}>
                <p>Dropdown content</p>
            </div >
  }}/>
}

简而言之，如果您使用的是类，则应像这样<Component

/>而不是普通的函数那样调用组件函数，Component()或者可以从使用类更改为使用组件函数

以上是 使用React Hooks的可重用下拉菜单 的全部内容， 来源链接： utcz.com/qa/422359.html

回到顶部