reactjs - 功能组件的this.refs (useRef, createRef) | react native

Question

我已经在一个类组件上使用了 this.refs，现在我正在将它重构为一个功能组件。我正在使用 ViewShot 库:https://github.com/gre/react-native-view-shot 在之前的实现中，它的用法如下:

您的应用程序中有一张二维码图片，您想要在社交媒体上发送该图片，因此您将其包装在 ViewShot 中:

<ViewShot ref="viewShot">
<QRImage
     address={....}
     image={...}
 />
</ViewShot>

然后，当您点击分享图片时，它会执行以下操作:

    onQRImagePress = async (address: string) => {
    const viewShotRef: any = this.refs.viewShot;
    try {
        const uri = await viewShotRef.capture();
        const options: Options = {
            url: "file://" + uri,
            title: `address: ${address}`,
        };
        await Share.open(options);
    }
    catch (e) {
        console.log(`Could not screenshot the QR or share it due to: ${e}`);
    }
};

因此我们使用类的 this.refs 来使用 ref。我想为功能组件做这件事。最好使用钩子(Hook)。我知道 userRef 存在，但它对我不起作用。我也尝试过使用 createRef 但不确定如何正确实现。

Answer 1

对于功能组件，您可以使用下面的钩子(Hook)React 已经提供了 useRef 钩子(Hook)，所以你可以使用它

import React, { useRef } from 'react';
import ViewShot from "react-native-view-shot";

const Mycomponent = () =>{
 const viewShotRef =  useRef();
 // Access viewShotref 
  console.log(viewShotRef && viewShotRef.current)

 return (
     <View> 
        <ViewShot ref={viewShotRef} > {...children} </ViewShot>
     </View>
 )

}