Использование ненужного React.forwardRef () может иметь какие-либо недостатки? - PullRequest
Новая
       0

Использование ненужного React.forwardRef () может иметь какие-либо недостатки?

0 голосов
/ 07 мая 2020

Я использую свой пользовательский компонент Button.

Раньше мне не нужен был ref в моем компоненте Button.

Но теперь мне нужно сделать так, чтобы он поддерживал ref .

Итак, я добавил React.forwardRef() в код.

И работает хорошо.

Это мой пример. 

interface ButtonProps {
  children?: string | number | React.ReactNode;
  style?: CSSProperties;
  className?: string;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean;
  block?: boolean;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({disabled, onClick = ()=>{}, className, block, style, children}, ref ) => {
  return (
   <button ref={ref} disabled={disabled} onClick={onClick} className={`Button ${className} ${block ? '--block' : ''}`} style={style}>
     {children}
   </button>
 )});

В моем проекте я использую более 100 компонентов Button,

Но только некоторые компоненты нуждаются в ref.

Это означает, что почти все кнопки не нужны React.forwardRef().

Можно ли использовать компонент, как указано выше? или

Должен ли я разделять компонент после использования?

1 Ответ

1 голос
/ 07 мая 2020

ForwardRef настолько полезен: это отличный API для создания абстракции над элементом dom, обеспечивая при этом возможность доступа к элементам dom. * с. Потому что это даст разработчикам возможность получить доступ к элементу dom. Итак, я думаю, вы приняли правильное решение, сделав свой компонент Button forwardRef: он дает разработчику возможность при необходимости получить доступ к элементу dom button.

...