React 和 Typescript 将 HTML 类型传递到自定义钩子中答案

【问题标题】：React & Typescript passing HTML types into custom hookReact 和 Typescript 将 HTML 类型传递到自定义钩子中
【发布时间】：2022-01-11 15:09:03
【问题描述】：

如何使用as SVGElement 或as HTMLDivElement 等传递类型注释... 成一个钩子

function AppSVG(){
    const ref = useResizeObserver((entry) => {
        ...
    }) as SVGElement;// <- how do I pass SVGElement to the hook

    return <svg ref={ref} />
}

function AppDiv(){
    const ref = useResizeObserver((entry) => {
        ...
    }) as HTMLDivElement;// <- how do I pass HTMLDivElement to the hook

    return <div ref={ref} />
}

钩子


function useResizeObserver(observerCallback: ResizeObserverCallback) {
    const ref = React.useRef<any>(null);//<- into the ref

    React.useEffect(() => {
        if (!!ref && !!ref.current)
            new ResizeObserver(observerCallback).observe(ref.current);
    }, []);

    return ref;
}

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

使用Generics，您可以将您的类型作为一种参数传入。 useRef 本身就是一个泛型，因此您可以创建自己的泛型类型并将其传递给 useRef。

function useResizeObserver<T>(observerCallback: ResizeObserverCallback) {
    const ref = React.useRef<T>(null);//<- into the ref
    ...
}

使用：

const ref = useResizeObserver<HTMLDivElement>();

【讨论】：

【解决方案2】：

或多或少这就是我想要的 Bastiat 的答案几乎是完整的。我必须包括<T extends Element>。

钩子：

function useResizeObserver<T extends Element>(observerCallback: (element: T, entry: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions) {
    const ref = React.useRef<T>(null);
    React.useEffect(() => {
        if (!!ref && !!ref.current) {
            const element = ref.current;
            new ResizeObserver((entry) => observerCallback(element, entry)).observe(element, options);
        }
    }, []);

    return ref;
}

组件：


    const ref = useResizeObserver<HTMLDivElement>((element) => {
        const height = element.offsetWidth;
        const width = element.offsetHeight;
        setState({ width, height });
    });

【讨论】：