如何从 React Native 中的父组件触发“ref.current.open()”答案

【问题标题】：How to trigger "ref.current.open()" from parent component in React Native如何从 React Native 中的父组件触发“ref.current.open()”
【发布时间】：2021-12-27 04:28:48
【问题描述】：

我目前正在使用“https://www.npmjs.com/package/react-native-raw-bottom-sheet”库处理自下而上面板的 React Native 项目。

我想每次单击父组件中的按钮而不是单击子组件中的按钮时触发自下而上的面板，我该如何实现。

Bottom Up Panel 子组件：

const refRBSheet : any = useRef();
 View style={styles.container}>
            <View style={{width:200}}>
              <Button title="OPEN BOTTOM SHEET" onPress={() => refRBSheet.current.open()} />
            </View>
      <RBSheet
        ref={refRBSheet}
        closeOnDragDown={true}
        closeOnPressMask={true}
        animationType='slide'
        customStyles={{
          wrapper: {
            backgroundColor: "transparent"
          },
          draggableIcon: {
            backgroundColor: "#999999"
          },
          container:{
            backgroundColor:'#101010',
            height:450,
          }
        }}
      >
        <MyComponent/>
      </RBSheet>
  </View>

我的父组件：

<View>
 <Button title="I want to click this button and trigger ButtomUpPanel/>
 <BottomUpPanel/>
</View>

【问题讨论】：

标签： android reactjs react-native

【解决方案1】：

你需要在你的父母中使用useImperativeHandle钩子

const refRBSheet : any = useRef();

const open = () => {
  refRBSheet.current.open()
};

useImperativeHandle(refRBSheet, () => ({
  open,
}));

然后将ref 传递给您的组件。

<View>
 <Button onPress={()=>open()} title="I want to click this button and trigger ButtomUpPanel/>
 <BottomUpPanel ref={refRBSheet} />
</View>

记住useImperativeHandle 应该与forwardRef 一起使用。

【讨论】：

感谢您的帮助，但它不适用于以下警告：“函数组件无法提供参考。您是否打算使用 React.fowardRefs
您需要将BottomUpPanel 包裹在React.forwardRef 中。见reactjs.org/docs/react-api.html#reactforwardref

【解决方案2】：

实际上，经过数小时的研究，我终于找到了解决自己问题的方法：

要从我使用的父组件向子组件传递引用

转发引用

通过导入导入

{forwardRef} from 'react';

然后在我的情况下，我只是将我的子组件包装在 forwardRef 中：

const DetailPanelBottomUp: FC<IDetailPanel> = forwardRef(
  ({imgUrl, title, contentUrl,value}, ref: any) => {
    return (
      <View style={styles.container}>
        <RBSheet
          ref={ref}
          onClose={() => setSocialNet(false)}
          closeOnDragDown={true}
          closeOnPressMask={true}
          animationType="slide"
          customStyles={{
            wrapper: {
              backgroundColor: 'transparent',
            },
            draggableIcon: {
              backgroundColor: '#999999',
            },
            container: {
              backgroundColor: '#101010',
              height: 450,
            },
          }}>
        <MyComponent/>
      </RBSheet>
  </View>

我只是在我的父组件中声明

使用引用

然后它的动作将 ref 作为 props 传递给子组件

 const refRBSheet : any = useRef();

  const open = () => {
    refRBSheet.current.open();
  };

<View>
 <DetailPanelBottomUp title={actionItem.title} contentUrl={actionItem.src} ref= 
 {refRBSheet} imgUrl={actionItem.src} />
 <Button onPress={()=>open()} title="I want to click this button and trigger ButtomUpPanel/>
</View>

【讨论】：