Работа с refs в функциональном компоненте без forwardRef

У меня ситуация с рефинансами, и я просто ищу обходной путь.

https://github.com/styleguidist/react-docgen-typescript/issues/314

Использование служебного метода, который по сути является React.forwardRef под капотом, нарушает документацию по автоматическому типу в моем Storybook.

Я не против временно экспортировать 2 компонента:

  1. Один без пересылки Ссылка на Storybook
  2. Один с forwardRefWithAs для использования приложения

Однако это, очевидно, не просто ... работает из-за того, что ссылки не передаются неявно в обычных функциях.

Возможно ли что-то подобное? Есть ли с этим подводные камни?

// i'll use a generic
const useForwardedRef = (ref: React.Ref<any>) =>{
  const innerRef = useRef<any>(null);
  useEffect(() => {
    if (!ref) return;
    if (typeof ref === 'function') {
      ref(innerRef.current);
    } else {
      ref.current = innerRef.current;
    }
  });
 
  return innerRef;
}

Я мог бы просто сделать:

export const ButtonWithoutForwardRefWithAs = forwardRef((props: ButtonProps, ref: React.Ref<any>) => <JSX {...props} ref={ref} />

const Button = forwardRefWithAs<NonSemanticButtonProps, 'button'>((props: ButtonProps, ref) => (
  <ButtonWithoutForwardRefWithAs {...props} ref={ref} />
));

Что вы думаете?


reactjs typescript react-forwardref storybook
person Kyle Holmberg    schedule 06.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В конечном итоге это не имело ничего общего с служебным методом. Вместо этого это было связано с тем, как я экспортирую вещи.

Ранее:

const Button = forwardRefWithAs<NonSemanticButtonProps, 'button'>((props: ButtonProps, ref) => (
  <ButtonWithoutForwardRefWithAs {...props} ref={ref} />
));

Button.displayName = 'Button';

export { Button };

Работающий:

export const Button = forwardRefWithAs<NonSemanticButtonProps, 'button'>((props: ButtonProps, ref) => (
  <ButtonWithoutForwardRefWithAs {...props} ref={ref} />
));

Button.displayName = 'Button';
person Kyle Holmberg    schedule 06.12.2020