Início / coding / Perguntas / 78246136
Accepted
MakePeaceGreatAgain
Asked: 2024-03-30 06:10:53 +0800 CST

não é possível usar ref no componente de função

  • 772

Estou tentando obter a largura do componente filho no meu pai em reação:

import { FC, PropsWithChildren, useRef } from "react";

const MyParent: FC<PropsWithChildren> = (props) => {
    const myref = useRef(null);
    return (<MyChild ref={myref}/>)
}

const MyChild: FC<PropsWithChildren> = (props) => {
    return (<View />)
}

No entanto, isso não será compilado. Estou tendo o erro a seguir:

Digite '{ref: MutableRefObject; }' não pode ser atribuído ao tipo 'IntrinsicAttributes & {children?: ReactNode; }'. A propriedade 'ref' não existe no tipo 'IntrinsicAttributes & {children?: ReactNode; }'.ts(2322)

Achei que todo objeto poderia ser usado como referência. Como posso usar uma referência para meu filho?

typescript

1 respostas

  1. Best Answer

    Isso porque refé um adereço preservado do react e você não pode especificá-lo diretamente como adereços. Mas você pode usar forwardRefa função para fazer isso:

    import {type PropsWithChildren, forwardRef} from "react";

const MyChild = forwardRef<View, PropsWithChildren>((props, ref) => {
    return <View ref={ref} />
})

MyChild.displayName = "MyChild";

const MyParent: FC<PropsWithChildren> = (props) => {
    const myref = useRef<View>(null);

    return (<MyChild ref={myref}/>)
}

    Você pode ler mais na documentação oficial ( https://react.dev/reference/react/forwardRef )

    • 2

relate perguntas