React Native Typescript - Проблема с типом ссылки

Я пытаюсь передать своему компоненту ссылку, но у меня проблемы с типами машинописных текстов .. Если кто-то может помочь, это будет очень признательно

./Privacy.tsx

const Privacy = () = ›{

const buttonRef = useRef();

return <Button title="test" ref={(ref) => buttonRef = ref}/>

}

./Button.tsx

type Props = {title: string, ref ?: Что мне здесь нужно указать? }

Кнопка const: React.FC = ({title, ref}) = ›{

return 
    <View ref={ref} />

}


react-native typescript react-ref
person Luca Verdecchia    schedule 02.07.2020    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

ref нельзя передать напрямую через реквизиты, если вы хотите передать ref от родителя другому пользовательскому компоненту, который необходимо использовать React.forwardRef. Например,

const Privacy = () => {
  const buttonRef = useRef();

  return <Button title="test" ref={buttonRef} />;
};

interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
  title: string;

  // other props you want to pass to the button component
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref) => { 
    const { title } = props;  

    return <button ref={ref}>Hello</button>;
  }
);

Имейте в виду, что первым аргументом компонента Button будет props, который вы передадите, а вторым аргументом будет объект ref.

Подробнее о пересылке ссылок

person subashMahapatra    schedule 02.07.2020