reactjs - 从父组件中执行子组件中的功能

Question

我正在使用 React Native，并且我有一个功能组件，其中包含一个函数。这个子组件位于另一个组件内，在另一个组件上我有一个按钮。所以，当用户点击按钮时，我想执行子组件中的功能。

我阅读了有关 forwardRef 的内容(因为我看到了几个建议此解决方案的问题):https://reactjs.org/docs/forwarding-refs.html但它似乎不适合我的问题。我不需要访问子组件中的元素，只需执行函数即可。

这是我的子组件:

  const Popup = () => {
  const opacity = useRef(new Animated.Value(1)).current;
  const translationY = useRef(new Animated.Value(-120)).current;

  const {theme} = useContext(ThemeContext);

  const displayPopup = () => {
    Animated.spring(translationY, {
      toValue: 100,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Animated.View
      style={[
        styles.container,
        {
          backgroundColor: theme.popup,
          opacity: opacity,
          transform: [{translateY: translationY}],
        },
      ]}>
     ...
    </Animated.View>
  );
};

父组件内部:

<SafeAreaView>
      // Other components
      <Popup />
      <Button onPress={() => {//NEEDS TO CALL displayPopup}}/>
</SafeAreaView>

Answer 1

使用前向引用来访问子函数可能是一种解决方案，但这不是 React 的方式(参见 useImperativeHandle hook)

相反，我会更改 Popup 组件的 props 以触发您要使用的动画:

import { useEffect } from "react";

 const Popup = ({display = false}) => {
  const opacity = useRef(new Animated.Value(1)).current;
  const translationY = useRef(new Animated.Value(-120)).current;

  const {theme} = useContext(ThemeContext);

  useEffect(() => {
      if(display){
        Animated.spring(translationY, {
            toValue: 100,
            useNativeDriver: true,
        }).start();
      } 
  }, [display])

  return (
    <Animated.View
      style={[
        styles.container,
        {
          backgroundColor: theme.popup,
          opacity: opacity,
          transform: [{translateY: translationY}],
        },
      ]}>
     ...
    </Animated.View>
  );
};

父组件:

const [display, setDisplay] = useState(false);

return(
   <SafeAreaView>
      // Other components
      <Popup display={display} />
      <Button onPress={() => {setDisplay(true)}}/>
    </SafeAreaView> 
)