通过功能组件中的 props 发送 ref

Question

在我的父组件中，我调用 hook useRef: const flatListRef = useRef(null); 然后我想在子组件中使用这个 flatListRef。我尝试像 documentation 那样做，但没有成功。当我调用函数 toTop 时，我得到：null is not an object (evaluating 'flatListRef.current.scrollToOffset')

这是我的父组件：

const BeautifulPlacesCards = ({navigation}: HomeNavigationProps<"BeautifulPlacesCards">) => {
    const flatListRef = useRef(null);
    const toTop = () => {
        flatListRef.current.scrollToOffset(1)
    }
    const buttonPressed = () => {
     toTop()
    }
    return(
           <Carousel filteredData={filteredData} flatListRef={flatListRef}/>
    )
}

这是我的子组件：

const Carousel = forwardRef((filteredData, flatListRef) => {
 return (
         <AnimatedFlatList 
                  ref={flatListRef}
         />
 )
}

Answer 1

这是一个工作示例：https://snack.expo.dev/@zvona/forwardref-example

关键点：

向下传递时需要使用 prop ref，而不是 flatListRef
你需要从 props

filteredData

相关代码如下：

const Child = forwardRef(({ filteredData }, ref) => {
  return (
    <FlatList
      ref={ref}
      style={styles.flatList}
      data={filteredData}
      renderItem={({ item }) => (
        <Text style={styles.item} key={`foo-${item}`}>
          {item}
        </Text>
      )}
    />
  );
});

const App = () => {
  const flatListRef = useRef(null);

  const toTop = () => {
    flatListRef.current.scrollToOffset(1);
  };

  return (
    <View style={styles.container}>
      <Button title={'Scroll back'} onPress={toTop} />
      <Child filteredData={[1,2,3,4,5,6]} ref={flatListRef} />
    </View>
  );
};

通过功能组件中的 props 发送 ref

Send ref via props in functional component

ref

reactjs

react-native

use-ref