reactjs - Použití ref s dynamickým názvem tagu v TypeScriptu

Mám komponentu, která má dynamický název tagu, který může být buď div nebo fieldset, v závislosti na hodnotě prop group, která je vrácena z našeho hooku useForm.

const FormGroup = React.forwardRef<
  HTMLFieldSetElement | HTMLDivElement,
  React.HTMLAttributes<HTMLFieldSetElement | HTMLDivElement>
>(({ children, className, ...props }, ref) => {
  const { group } = useForm();
  const Component = group ? "fieldset" : "div";

  return (
    <Component ref={ref} className={className} {...props}>
      {children}
    </Component>
  );
});

Nicméně se vrací chyba, že ref není přiřaditelný... Zkoušel jsem použít:

const Component = group ? "fieldset" : "div" as keyof JSX.IntrinsicElements;

Existuje čistý způsob, jak zkontrolovat typ dynamického názvu značky, který používá ref?

Odpověď č. 1

Toto je můj přístup

import {
  ElementType,
  FC,
  HTMLAttributes,
  Ref,
  forwardRef,
  useRef,
} from "react";

interface ComponentProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  ref: Ref<HTMLElement>;
}

const Component: FC<ComponentProps> = forwardRef(
  ({ as: Tag = "div", children, ...otherProps }, ref) => {
    return (
      <Tag {...otherProps} ref={ref}>
        {children}
      </Tag>
    );
  }
);

const App: FC = () => {
  const myRef = useRef<HTMLElement>(null);
  const group: "div" | "fieldset" = "div";
  return (
    <>
      <div>App</div>
      <Component as={group} ref={myRef}>
        <p>This is the component's content</p>
      </Component>
    </>
  );
};

export default App;