React Native中如何从父组件触发子函数组件内部的自定义函数

方案1：forwardRef + useImperativeHandle（官方推荐，最贴合需求） #

你之前认为forwardRef不适用，是因为没有搭配useImperativeHandle使用，这个hook就是专门用来自定义暴露给父组件的ref内容，不需要暴露子组件内部元素，仅暴露你指定的方法即可，是React官方支持的子组件暴露内部方法的标准实现。

第一步：修改子组件Popup #

import { forwardRef, useImperativeHandle } from 'react';
// 其余原有导入保持不变

const Popup = forwardRef((props, ref) => {
  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();
  };

  // 仅暴露需要给父组件调用的方法
  useImperativeHandle(ref, () => ({
    displayPopup
  }));

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

第二步：修改父组件 #

import { useRef } from 'react';
// 其余原有导入保持不变

// 父组件内部逻辑
const popupRef = useRef(null);

return (
  <SafeAreaView>
      {/* 其余原有组件 */}
      <Popup ref={popupRef} />
      <Button onPress={() => {
        popupRef.current?.displayPopup(); // 可选链避免子组件未挂载时报错
      }}/>
  </SafeAreaView>
)

方案2：状态提升（符合单向数据流设计，适合状态需要共享的场景） #

如果你不想使用ref，也可以把控制弹窗的状态提升到父组件，通过props传递给子组件，子组件监听props变化触发对应方法。

第一步：修改子组件Popup #

import { useEffect } from 'react';
// 其余原有导入保持不变

const Popup = ({ visible }) => {
  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();
  };

  // 监听父组件传入的visible变化，触发对应方法
  useEffect(() => {
    if(visible) displayPopup();
  }, [visible])

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

第二步：修改父组件 #

import { useState } from 'react';
// 其余原有导入保持不变

// 父组件内部逻辑
const [showPopup, setShowPopup] = useState(false);

return (
  <SafeAreaView>
      {/* 其余原有组件 */}
      <Popup visible={showPopup} />
      <Button onPress={() => setShowPopup(true)} />
  </SafeAreaView>
)

方案选择建议 #

• 仅需要调用子组件内部方法、不需要共享状态的场景，优先选择方案1
• 弹窗的显示状态需要在父组件其他逻辑中复用的场景，优先选择方案2

内容的提问来源于stack exchange，提问作者John Doah