主页 / coding / 问题 / 78246136
Accepted
MakePeaceGreatAgain
Asked: 2024-03-30 06:10:53 +0800 CST

不能在函数组件中使用 ref

  • 772

我试图在反应中获取父组件中子组件的宽度：

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 />)
}

但是，这不会编译。我收到以下错误：

类型 '{ ref: MutableRefObject; }' 不可分配给类型 'IntrinsicAttributes & {children?: ReactNode; }'。属性“ref”在类型“IntrinsicAttributes & {children?: ReactNode;”上不存在 }'.ts(2322)

我认为每个物体都可以用作参考。我如何为我的孩子使用参考？

typescript

1 个回答

  1. Best Answer

    这是因为ref是 React 保留的 props，你不能直接将它指定为 props。但你可以使用forwardRef函数来做到这一点：

    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}/>)
}

    您可以在官方文档中阅读更多内容（https://react.dev/reference/react/forwardRef）

    • 2

相关问题