Создать компонент расширяющий пропсы ButtonProps с учетом forwardRef

Question

От меня был вопрос касательно расширения BoxProps, я давненько смог переделать и для ButtonProps, но теперь прорблема возникает, если я захочу компонент завернуть в forwardRef, я не понимаю как это правильно сделать.

В таком варианте я не получаю подсказок о пропсах (редактор видит только key и ref) и имею не совсем правильный тип для Ref.

import { Button as ButtonMui, ButtonProps, ButtonTypeMap } from "@mui/material";
import { ElementType, forwardRef, Ref } from "react";

export interface IButtonProps { }

function Button<C extends ElementType = ButtonTypeMap[ "defaultComponent" ]>(
    {
        sx = [],
        ...props
    }: ButtonProps<C, { component?: C; }> & IButtonProps,
    ref: Ref<HTMLButtonElement> // Поправить тут тип
)
{
    return (
        <ButtonMui
            {...props}
            ref={ref}
            sx={[ {}, ...Array.isArray(sx) ? sx : [ sx ] ]}
        />
    );
}

export default forwardRef(Button);

Answer 1

Для правильной работы с forwardRef в TypeScript, важно обеспечить, что типы пропсов и рефа корректно передаются и распознаются. В вашем случае, вы хотите расширить пропсы ButtonProps из библиотеки Material-UI и корректно типизировать реф.

Ключевым моментом является использование React.RefForwardingComponent для создания компонента, который может принимать ref как часть его пропсов. Вы также должны обеспечить, чтобы тип рефа соответствовал элементу, который фактически будет получать реф (в данном случае HTMLButtonElement для кнопки).

import React, { ElementType, ForwardedRef, forwardRef } from 'react';
import { Button as MuiButton, ButtonProps as MuiButtonProps, ButtonTypeMap } from '@mui/material';

// Определяем свои дополнительные пропсы
export interface IButtonProps {
  // Пример дополнительного пропса
  extraProp?: string;
}

// Определение типа для пропсов вашего Button компонента, расширяя MuiButtonProps
type ButtonProps<C extends ElementType = ButtonTypeMap['defaultComponent']> =
  MuiButtonProps<C, { component?: C }> & IButtonProps;

// Создание компонента Button с использованием forwardRef
const Button = forwardRef(function Button<C extends ElementType = ButtonTypeMap['defaultComponent']>(
  props: ButtonProps<C>,
  ref: ForwardedRef<HTMLButtonElement> // Используйте ForwardedRef для корректной типизации ref
) {
  const { sx = [], extraProp, ...otherProps } = props;

  // Пример использования extraProp, если нужно
  console.log(extraProp);

  return (
    <MuiButton {...otherProps} ref={ref} sx={[{}, ...Array.isArray(sx) ? sx : [sx]]} />
  );
});

export default Button;

БЛОГ НА HUSL

Создать компонент расширяющий пропсы ButtonProps с учетом forwardRef

Ответы (1 шт):