导入时，如何在 React Native 中从 child 调用另一个 child 中的函数？

Question

我导入了一些自定义功能组件：

        <ProgressSwitch name="first" routeId={route.params.key} />
        <ProgressSwitch name="second" routeId={route.params.key} />
        <ProgressSwitch name="third" routeId={route.params.key} />

在第一个更改时更新它们的最佳方法是什么？所以如果我打开第一个开关，其他两个也会变为真。

进度切换：

const ProgressSwitch = props => {
  const [progress, setProgress] = useState(false);

  useEffect(() => {
    pullRouteProgressFromCloud(props.routeId, props.name, setProgress);
  }, []);

  const SubmitToFireStore = value => {
    setProgress(value);
    pushRouteProgressToCloud(props.routeId, {[props.name]: value});
  };

  return (
    <Switch
      onValueChange={value => SubmitToFireStore(value)}
      value={progress}
    />
  );
};
export default ProgressSwitch;

Answer 1

// parent
const [mainProgress, setProgress] = useState(false)
...
  <ProgressSwitch name="first" routeId={route.params.key} onSubmit={(value) => setProgress(value)} />
  <ProgressSwitch name="second" routeId={route.params.key} mainProgress={mainProgress} />
  <ProgressSwitch name="third" routeId={route.params.key} mainProgress={mainProgress} />

child 方：

// child

useEffect(() => {
  setProgress(props.mainProgress)
}, [props.mainProgress]);

const SubmitToFireStore = value => {
    if (onSubmit) {
      onSubmit(value)
    }
    setProgress(value);
    pushRouteProgressToCloud(props.routeId, {[props.name]: value});
};

顺便说一下，你应该在 JS 上使用 TS 并键入你的状态。在这里，您混合了布尔值和数字，这可能会导致错误。

与 TS:

const [mainProgress, setProgress] = useState<number>(0) // <number> is inferred by TS, not mandatory with simple types

导入时，如何在 React Native 中从 child 调用另一个 child 中的函数？

How do I call functions in another child from the child in react native when imported?

react-native