React -如何导出useRef

Question

我有很多页面需要集中在标题上。因此，我创建了一个钩子:

const useFocusOnElement = (elementID: string) =>  {
useEffect(() => {
return () => {
const elementToFocusOn = document.getElementById(elementID);
elementToFocusOn?.focus();
};
}, []);
}

我在每一页都调用这个钩子:

useFocusOnElement("header");

我被要求用useRef代替getElementById。我想知道在这种情况下是否可能。

id为header的头是我正在使用钩子的组件的JSX中的子组件。

所以如果我去编辑<Header />组件，我可以很容易地添加到它:

const mainHeaderRef = useRef(null);
<header id="header" tabIndex="-1" ref={mainHeaderRef}>

但是我不知道如何在钩子中使用useRef。有人能帮忙吗?

Answer 1

这是我实现这个钩子的想法。

import * as React from 'react';
// ./useFocusOnElement.ts
const useFocusOnElement = <T extends HTMLElement = HTMLElement>() => {
const elementRef = React.useRef<T>(null);
// On mount
React.useEffect(() => {
elementRef.current?.focus();
}, [elementRef.current]);
// On unmount (uncomment if needed)
// React.useEffect(() => {
//   return () => elementRef.current?.focus();
// }, [elementRef.current]);
return { elementRef };
};

// ./TextField.tsx
const TextField = React.forwardRef<HTMLInputElement>((props, ref) => {
return (
<div>
<input type="text" ref={ref} />
</div>
);
});

// ./App.tsx
const App = () => {
const { elementRef } = useFocusOnElement<HTMLInputElement>();
return (
<div>
<TextField ref={elementRef} />
</div>
);
}