TypeError: undefined is not an object（評估'refRBSheet.current.open'）

Question

我嘗試使用 react-native-raw-bottom-sheet 作為可重用組件。 我創建了一個父組件，問題是當我嘗試給出值時出現此錯誤。

 TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')

父組件

import React from 'react';
import RBSheet from 'react-native-raw-bottom-sheet';

const CustomActionSheet = (props) => {
  const { ref, Content, height } = { ...props };
  return (
    <RBSheet
      height={height}
      ref={ref}
      closeOnDragDown={true}
      closeOnPressMask={true}
      customStyles={{
        wrapper: {
          backgroundColor: 'transparent',
        },
        draggableIcon: {
          backgroundColor: '#000',
        },
      }}
    >
      {Content}
    </RBSheet>
  );
};

export default CustomActionSheet;

子組件

<View style={styles.chsDlvrBtn}>
          <Button title="Choose Delivery" onPress={() => refRBSheet.current.open()} />
        </View>
        <CustomActionSheet
          ref={refRBSheet}
          Content={
            <View style={styles.view}>
              {MONTH_OF_YEAR.map((val) => {
                return (
                  <Chip mode="outlined" onPress={() => {}} style={styles.chp}>
                    {val}
                  </Chip>
                );
              })}
            </View>
          }
        />

參考掛鈎

const refRBSheet = useRef()

這里出了什么問題。 謝謝，提前！！！

Answer 1

我只知道如何用功能組件做到這一點，但這樣做......

1. 將 RBSheet 或任何 ref'd 表放在子組件中

2. 將子組件導入父組件（將帶有上滑片的組件導入主組件

3. 使用類似this.sheetRef = React.createRef();在父組件中創建一個 ref

4. 將該 ref 作為道具傳遞給您的 RBSheet 子組件（RBSheet 應該在子組件中 - 而不是父組件 - 您實際上是在導入一個帶有 RBSheet 的輔助組件） - 應該類似於<MyChildComponent {...otherProps} sheetRef={this.sheetRef} />

5. 要在父組件中打開，請執行類似this.sheetRef.current.open(); 在子組件中，類似sheetRef.current.close();

6. 子組件中的 RBSheet 應類似於...

    import RBSheet from 'react-native-raw-bottom-sheet' const MyChildComponent = ({ sheetRef }) => { useEffect(() => { sheetRef.current.close(); }, []) return( <RBSheet ref={sheetRef} closeOnDragDown={true} height={height * 0.90} openDuration={250} customStyles={{ container: { borderTopLeftRadius: 40, borderTopRightRadius: 40 }, draggableIcon: { backgroundColor: "grey", width: 250 } }} > </RBSheet> ); };

7. 父組件應該看起來像......

class MyParentComponent extends Component {
constructor (props) {
super(props);
 this.sheetRef = React.createRef();
}
componentDidMount () {
   this.sheetRef.current.open();
}
render () {
  return (
     <Fragment>
          <MyChildComponent {...otherProps} sheetRef={this.sheetRef} />
     </Fragment>
  );
 }
}

Answer 2

嘗試用 onPress={( ) => refRBSheet?.current?.present()} 替換 onPress={() => refRBSheet.current.open()}