如何在其他函数式组件中调用ParentComp内部的setToTrue/setToFalse方法

原ParentComp.js代码 #

const ParentComp = (props) => {
  const [isTrue, setIsTrue] = useState(false);
  const setToTrue = () => {
    setIsTrue(true);
  };
  const setToFalse = () => {
    setIsTrue(false);
  };
  return isTrue ? (
      <Text>
        This is True
      </Text>
  ) : (
       <Text>
        This is False
      </Text>
  );
};
export default ParentComp;

核心问题 #

怎么在Login.js这类外部函数式组件里，调用ParentComp内部的setToTrue和setToFalse方法？

无效尝试 #

直接导出内部函数的写法不生效：

export const setToTrue = () => {
setIsTrue(true);
};

尝试用React.createRef导出并调用的方式，但发现ref无法传递给函数式组件的ParentComp：

ParentComp.js中添加的代码：

export const trueRef = React.createRef();
export function setToTrue() {
  let ref = trueRef.current;
  if (ref) {
    ref.setToTrue();
  }
}

export function setToFalse() {
  let ref = trueRef.current;
  if (ref) {
    ref.setToFalse();
  }
}

Login.js中的使用：

const Login = ({ navigation }) => {
return (
<View>
<ParentComp ref={trueRef}/>
</View>
)
}

解决方案：使用forwardRef + useImperativeHandle #

函数式组件默认不支持接收ref，需要通过React.forwardRef包裹组件，再用useImperativeHandle自定义暴露给外部的方法。

修改后的ParentComp.js #

import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Text } from 'react-native'; // 若为Web环境则替换为对应DOM组件

const ParentComp = forwardRef((props, ref) => {
  const [isTrue, setIsTrue] = useState(false);
  
  const setToTrue = () => {
    setIsTrue(true);
  };
  
  const setToFalse = () => {
    setIsTrue(false);
  };

  // 向外部暴露指定方法
  useImperativeHandle(ref, () => ({
    setToTrue,
    setToFalse
  }));

  return isTrue ? (
    <Text>This is True</Text>
  ) : (
    <Text>This is False</Text>
  );
});

export default ParentComp;

在Login.js中调用方法 #

import React, { useRef } from 'react';
import { View, Button } from 'react-native'; // 若为Web环境则替换为对应DOM组件
import ParentComp from './ParentComp';

const Login = ({ navigation }) => {
  const parentRef = useRef(null);

  // 调用ParentComp内部方法的示例
  const handleSetTrue = () => {
    parentRef.current?.setToTrue();
  };

  const handleSetFalse = () => {
    parentRef.current?.setToFalse();
  };

  return (
    <View>
      <ParentComp ref={parentRef} />
      <Button title="设为True" onPress={handleSetTrue} />
      <Button title="设为False" onPress={handleSetFalse} />
    </View>
  );
};

export default Login;

原理说明 #

• forwardRef：允许将ref从父组件传递到子函数式组件内部，解决函数式组件默认不能接收ref的问题。
• useImperativeHandle：自定义通过ref暴露给父组件的内容，避免暴露整个组件实例，只对外提供需要调用的方法，更安全可控。

内容的提问来源于stack exchange，提问作者Daniyal Shaikh