Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Пытаюсь создать функциональный компонент на основе <a> тега.
Выдаёт ошибку из заголовка: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Изначально делал без forwardRef, но погуглив ошибку, пришёл к выводу, что надо писать так, но всё равно ошибка не уходит. Не понимаю, как правильно этот компонент реализовать?
По сути это просто <a>, но с дополнительным параметром, на основании которого выводится один из вариантов тега
import React from "react";
import { forwardRef } from "react";
interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
isLoading?: boolean;
}
export const Link: React.FC<LinkProps> = forwardRef<HTMLAnchorElement, LinkProps>(
({ isLoading, children, ...attributes }, ref) => {
return isLoading ? (
<a ref={ref} {...attributes}>{children}</a>
) : (
<a {...attributes}>Loading...</a>
);
}
);