代码之家 › 专栏 › 技术社区 › swamp blues

如何从自定义挂钩收集和返回多个函数

react-hooks reactjs

swamp blues · 技术社区 · 2 年前

主要的tsx:

import React from "react";
import { useRectangleControls } from "src/useRectangleControls";

export function Main() {
    const rectangleRef = React.useRef<HTMLDivElement>(null);
    const mainControls = useRectangleControls(rectangleRef);

    React.useEffect(() => {
        console.log(mainControls.isMouseInRectangle);
    }, [mainControls.isMouseInRectangle]);

    return (
        <div className="w-full h-screen flex items-center justify-center">
            <div className="w-[60%] h-[30%] bg-green-900" ref={rectangleRef} onMouseEnter={mainControls.onMouseEnter} onMouseLeave={mainControls.onMouseLeave}></div>
        </div>
    );
}

上面的组件返回一个矩形。矩形的颜色取决于鼠标位置。的事件处理程序 onMouseEnter 和 onMouseLeave 被转移到一个名为useRectangleControls的自定义钩子:

import React from "react";

export function useRectangleControls(rectangleRef: React.RefObject<HTMLDivElement>) {
    const [isMouseInRectangle, setIsMouseInRectangle] = React.useState(false);

    function onMouseEnter() {
        if (rectangleRef.current) {
            setIsMouseInRectangle(true);
            rectangleRef.current.classList.remove("bg-green-900");
            rectangleRef.current.classList.add("bg-red-900");
        }
    }
    function onMouseLeave() {
        if (rectangleRef.current) {
            setIsMouseInRectangle(false);
            rectangleRef.current.classList.remove("bg-red-900");
            rectangleRef.current.classList.add("bg-green-900");
        }
    }


    return { onMouseEnter, onMouseLeave, isMouseInRectangle };
}

我想收集所有函数并在一个变量中返回它们。我希望返回语句看起来像这样: return {rectangleControls, isMouseInRectangle} 哪里 rectangleControls 包含 useRectangleControls 自定义挂钩。

我的目标是避免每次向添加新函数时更新return语句 用户连接角度控件

2 回复 | 直到 2 年前

Bhavesh Daswani 2 年前

你可以用下面的方法

    import React from "react";
    
    export interface Indexable<T = any> {
      [key: string]: T|undefined;
    }
     export interface RectangleControls {
          onMouseEnter: () => void;
          onMouseLeave: () => void;
      }
            
            export function useRectangleControls(rectangleRef: React.RefObject<HTMLDivElement>) {
                const [isMouseInRectangle, setIsMouseInRectangle] = React.useState(false);
//           const rectangleControls: Indexable = {}; // one approach for typescript
const rectangleControls: RectangleControls = {
   onMouseEnter: () => {},
   onMouseLeave: () => {}
}; // second approach for typescript
         
            
                 rectangleControls.onMouseEnter = () => {
                    if (rectangleRef.current) {
                        setIsMouseInRectangle(true);
                        rectangleRef.current.classList.remove("bg-green-900");
                        rectangleRef.current.classList.add("bg-red-900");
                    }
                }
                rectangleControls.onMouseLeave = () => {
                    if (rectangleRef.current) {
                        setIsMouseInRectangle(false);
                        rectangleRef.current.classList.remove("bg-red-900");
                        rectangleRef.current.classList.add("bg-green-900");
                    }
                }
            
            
                return { rectangleControls, isMouseInRectangle };
            }

编辑:解释钩子中所做的更改。在这里,我创建了一个对象rectangleControls,并将onMouseCenter、onMouseLeave转换为arrow函数,并将它们指定为rectangleControls的键,这将帮助您实现导出单个变量的目标。

Amr Khaled 2 年前

您只需要导入自定义挂钩 useRectangleControls 在您要使用它的组件内部。然后使用 onMouseEnter, onMouseLeave, isMouseInRectangle 就像这样。

const { onMouseEnter, onMouseLeave, isMouseInRectangle } = useRectangleControls(pass your params here);

不要忘记从其位置导入。

例如:

import useRectangleControls from "./hooks/useRectangleControls";

就是这样。