Как перегрузить React.ForwardRefRenderFunction компонент?

Question

[Михаил]

Есть следующий компонент кнопки, который я постарался максимально упростить для примера:

import React    from 'react'
import { Link } from 'react-router-dom'

type ButtonProps = (
  & React.ComponentPropsWithoutRef<'button'>
  & React.AriaAttributes
  & { href?: never }
)

type AnchorProps = (
  & Omit<LinkProps, 'to'>
  & React.AriaAttributes
  & { href: string }
)

type OverloadedComponent = (
  & React.FunctionComponent<ButtonProps>
  & React.FunctionComponent<AnchorProps>
)

const isAnchor = (props: ButtonProps | AnchorProps): props is AnchorProps => 'href' in props

const Button: OverloadedComponent = (props) => {
  if (isAnchor(props)) {
    const { href, ...linkProps } = props
    return (
      <div className="button">
        <Link className="control" to={href} {...linkProps } />
      </div>
    )
  }
  return (
    <div className="button">
      <button className="control" {...props} />
    </div>
  )
}

export default Button

Компонент принимает в качестве параметров либо ButtonProps, либо AnchorProps.

1. Если я передаю ему параметр type - он подсказывает значения button, reset и submit;
2. Если я передаю ему параметр onClick без передачи href - то событие происходит именно для HTMLButtonElement, а в противном случае для HTMLAnchorElement;

Но это реализация компонента с помощью FunctionComponent, но сколько я ни пытался - не получается это переписать на ForwardRefRenderFunction, чтобы передаваемые ref зависели от Props. Я примерно понимаю что это должно как-то реализовываться с помощью дженериков, но решение мне в голову так и не пришло.

Comments

[WbICHA]

Честно? Нифига непонятно. В твоём примере никакого рефа нет вообще. И перегрузка непонятно зачем добавлена. Что ты из этого хочешь сделать, следовательно, тоже непонятно.

[Михаил]

WbICHA, как это не понятно?) Есть компонент кнопки, который может выступать как кнопкой, так и ссылкой, логично? Логично. Честно сказать, я даже удивлен что Вы не поняли. К тому же в конце я дописал на счет отсутствия ref:

Но это реализация компонента с помощью FunctionComponent, но сколько я ни пытался - не получается это переписать на ForwardRefRenderFunction, чтобы передаваемые ref зависели от Props

Есть тип ButtonProps, а есть AnchorProps. Первый нужен для кнопки, а второй для ссылки. Перегрузка решает вопрос того, как этот компонент доступен снаружи:

<Button /> // это кнопка
<Button type="button" /> // атрибут type автоматически подскажет мне только нужные значения - button/reset/submit
<Button onClick={(e) => {}} /> // MouseEvent будет работать для HTMLButtonElement

<Button href="/" /> // это ссылка
<Button href="/" type="???" /> // это ссылка, но ей я уже не могу перекинуть типы кнопки
<Button href="/" onClick={(e) => {}} /> // MouseEvent будет работать для HTMLAnchorElement

[Михаил]

WbICHA, то есть суть в том, что типы ButtonProps и AnchorProps отличаются тем, что для первого недоступен href, а для второго доступен. Теперь, если я НЕ передаю href - мне доступны только атрибуты кнопки, а в противном случае - только атрибуты ссылки. Все просто)

[Kentavr16]

Михаил, чет и правда ничего не понятно. Может в одном предложении опишешь чего ты хочешь добиться?

[Kentavr16]

Михаил, и какое отношение форвард реф имеет к описаному выше тоже не особо ясно.

[Михаил]

Kentavr16, вот есть компонент кнопки, да?) Часто встречается такая ситуация, что кнопка должна выполнять роль ссылки и для этого мы должны проверять props компонента, чтобы понять что рендерить - кнопку или ссылку.

Зачем нужна перегрузка? Чтобы исходя из переданных в компонент пропсов понимать что нужно отрисовать, но чтобы это работало не только внутри компонента, но и снаружи.

В данном случае не просто отрисуется кнопка, но и переданные ей пропсы будут иметь отношение непосредственно с элементом button - нам доступны все атрибуты из ButtonProps.

<Button />

Здесь же мы передаем параметр href в виде строки и теперь нам доступны все атрибуты из AnchorProps - тот же самый onClick теперь явно взаимодействует с HTMLAnchorElement.

<Button href="/posts" />

По сути, весь кусок кода, написанный в вопросе, можно скопировать, вставить и он будет работать, правда нужно скачать "react-router-dom" и можно потыкать это все на практике что конкретно делает перегрузка

[Михаил]

Kentavr16, хоспади)

Вот пишу я такой компонент и в нем есть кнопка. Без перегрузки я бы просто сказал что props: ButtonProps | AnchorProps. Внутри компонента логика бы осталась прежней, но вот что бы произошло снаружи:

<Button onClick={e => {}} /> 
// где MouseEvent происходит то ли для HTMLButtonElement, то ли для HTMLAnchorElement
// и нам нужно будет явно это все дело проверить + атрибут type ничего нам не подскажет
// поскольку у ссылок тоже есть атрибут type и для компонента он просто станет типа string... ужас

Перегрузка решает этот вопрос - если я явно не передаю href это 100% кнопка! onClick будет относится к HTMLButtonElement, type будет подсказывать только типы, которые доступны для кнопки. В противном случае - это 100% ссылка, ведь я передал href.

Зачем нужен ref? Затем же, зачем и все остальное. Цель такова, чтобы работая с кнопкой я не должен был зачем-то проверять будет ли событие клика происходит точно на кнопке, а не на ссылке... бред же?

Точно также и с ref - если я не передаю параметр href, то это бы означало что я не могу передать в этот компонент ref на ссылку, поскольку компонент работает напрямую с кнопкой.

[Kentavr16]

Михаил, я наверное начал понимать о чем речь. Но т.к. перегрузки как таковой в джаваскрипт нет, я никогда не пытался все настолько формализировать, что ли. Зачем одевать обычный простой условный рендеринг, который и так работает отлично, в дополнительные обертки? Тем более форвард реф. Зачем доступ к конкретному экземпляру ссылки, если все что нужно для ее корректной работы - передано в пропсах? Думаю нужно смотреть проще. Джаваскрипт имеет в арсенале много своих методов для работы с данными, и делать из него подобие джавы я бы не пытался - много работы при минимуме отдачи.

// где MouseEvent происходит то ли для HTMLButtonElement, то ли для HTMLAnchorElement

так в процессе типизации все описано, разве нет?

[WbICHA]

Михаил, что-то вроде этого?

spoiler

type QQQ = {
  a?: never;
  b: string;
  c: string;
};
type WWW = {
  a: string;
  b: string;
  d: string;
};

type ForwardedRefWithOverride<T extends [object, HTMLElement]> = UnionToIntersection<
  T extends T ? ForwardRefExoticComponent<PropsWithoutRef<T[0]> & RefAttributes<T[1]>> : never
>;

const forwardRefWithOverrides = <T extends [object, HTMLElement][]>(
  render: ForwardRefRenderFunction<T[number][1], T[number][0]>,
) => {
  return forwardRef(render) as ForwardedRefWithOverride<T[number]>;
};

export const Ccc = forwardRefWithOverrides<[[QQQ, HTMLButtonElement], [WWW, HTMLLinkElement]]>((props, ref) => {
  if (typeof props.a === 'string') {
    const { a, b, d } = props;

    return (
      <>
        <link ref={ref as ForwardedRef<HTMLLinkElement>} />

        {a}
        {b}
        {d}
      </>
    );
  }
  {
    const { a, b, c } = props;

    return (
      <button ref={ref as ForwardedRef<HTMLButtonElement>} type="button">
        {a}
        {b}
        {c}
      </button>
    );
  }
});

Ccc.displayName = 'Ccc';

export const Vvv = () => {
  const ref1 = useRef<HTMLButtonElement>(null);
  const ref2 = useRef<HTMLLinkElement>(null);

  return (
    <>
      <Ccc ref={ref1} b="asd" c="asd" />
      <Ccc ref={ref2} a="asd" b="asd" d="asd" />

      {/* @ts-expect-error - c missed */}
      <Ccc b="asd" d="asd" />
      {/* @ts-expect-error - d missed, extra c */}
      <Ccc a="asd" b="asd" c="asd" />
      {/* @ts-expect-error - extra c */}
      <Ccc a="asd" b="asd" c="asd" d="asd" />
      {/* @ts-expect-error - wrong ref */}
      <Ccc ref={ref2} b="asd" c="asd" />
    </>
  );
};

[WbICHA]

Михаил, https://www.typescriptlang.org/play?#code/JYWwDg9g...
Kentavr16, если интересно, тоже можешь глянуть.

[Михаил]

WbICHA, слушай, вроде это то что нужно, попробую разобрать что ты тут понаписал, в любом случае спасибо!

[Kentavr16]

WbICHA, мсье знает толк в извращениях ))

[Михаил]

WbICHA, да, это абсолютно то, что мне было нужно. Код, конечно, ты жесткий написал, я его подогнал под свою задачу, но, кажется, придется найти время и разобрать подробно что ты там написал, ахаха. Можешь закидывать свой коммент в ответы - отмечу решением)

[WbICHA]

Михаил, какие требования, такой и код.)

Answer 1

[WbICHA]

https://www.typescriptlang.org/play?#code/JYWwDg9g...

spoiler

type QQQ = {
  a?: never;
  b: string;
  c: string;
};
type WWW = {
  a: string;
  b: string;
  d: string;
};

type ForwardedRefWithOverride<T extends [object, HTMLElement]> = UnionToIntersection<
  T extends T ? ForwardRefExoticComponent<PropsWithoutRef<T[0]> & RefAttributes<T[1]>> : never
>;

const forwardRefWithOverrides = <T extends [object, HTMLElement][]>(
  render: ForwardRefRenderFunction<T[number][1], T[number][0]>,
) => {
  return forwardRef(render) as ForwardedRefWithOverride<T[number]>;
};

export const Ccc = forwardRefWithOverrides<[[QQQ, HTMLButtonElement], [WWW, HTMLLinkElement]]>((props, ref) => {
  if (typeof props.a === 'string') {
    const { a, b, d } = props;

    return (
      <>
        <link ref={ref as ForwardedRef<HTMLLinkElement>} />

        {a}
        {b}
        {d}
      </>
    );
  }
  {
    const { a, b, c } = props;

    return (
      <button ref={ref as ForwardedRef<HTMLButtonElement>} type="button">
        {a}
        {b}
        {c}
      </button>
    );
  }
});

Ccc.displayName = 'Ccc';

export const Vvv = () => {
  const ref1 = useRef<HTMLButtonElement>(null);
  const ref2 = useRef<HTMLLinkElement>(null);

  return (
    <>
      <Ccc ref={ref1} b="asd" c="asd" />
      <Ccc ref={ref2} a="asd" b="asd" d="asd" />

      {/* @ts-expect-error - c missed */}
      <Ccc b="asd" d="asd" />
      {/* @ts-expect-error - d missed, extra c */}
      <Ccc a="asd" b="asd" c="asd" />
      {/* @ts-expect-error - extra c */}
      <Ccc a="asd" b="asd" c="asd" d="asd" />
      {/* @ts-expect-error - wrong ref */}
      <Ccc ref={ref2} b="asd" c="asd" />
    </>
  );
};