从组件调用主文件中的函数

Question

我最近将我的应用程序从使用 Class 组件重构为功能组件，并且在最后几件事上遇到了问题。

我的 Home.js 如下所示（简化）：

// imports....
import { StartStopButtons } from "../components/Button";

export default ({ navigation }) => {

  const [scrollEnabled, setScrollEnabled] = useState(false);
  const [elapsedMilliseconds, setElapsedMilliseconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [startTime, setStartTime] = useState(false);
  const [stopTime, setStopTime] = useState(false);
  const [isReset, setIsReset] = useState(true);

  start = () => {
    console.log("START");
    // stuff
  };

  reset = () => {
    console.log("RESET");
    // stuff
  };

  stop = () => {
    console.log("STOP");
    // stuff
  };

  return (
    <View style={styles.container}>
        <StartStopButtons
          isRunning={isRunning}
          isReset={isReset}
          elapsedMilliseconds={elapsedMilliseconds}
        />
    </View>
  );
};

我的StartStopButtons有不同的外观，根据当前状态，它会显示Start、Stop或Reset并调用相应的函数。我目前将此情报放在另一个文件中，我的 Button.js 文件。

Button.js :

//imports....

export const StartStopButtons = ({
  isRunning,
  isReset,
  elapsedMilliseconds,
}) => {
  if (isRunning && isReset === false) {
    return (
      <View>
        <TouchableOpacity onPress={stop}>
          <Text>Stop</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={pause}>
          <Text>Pause</Text>
        </TouchableOpacity>
      </View>
    );
  } else {
    if (elapsedMilliseconds === 0) {
      return (
        <TouchableOpacity onPress={start}>
          <Text>Start</Text>
        </TouchableOpacity>
      );
    } else {
      return (
        <TouchableOpacity onPress={reset}>
          <Text>Reset</Text>
        </TouchableOpacity>
      );
    }
  }
};

重构之前，我使用 this.state.start、this.state.stop 调用位于 Home.js.[=24 中的 start 和 stop 函数=]

我现在怎样才能做到这一点？有没有更好的方法？

Answer 1

您可以像传递 isRunning、isReset 和 elapsedMilliseconds 一样将函数作为 props 传递。

但请在函数名前加上const。

// imports....
import { StartStopButtons } from "../components/Button";

export default ({ navigation }) => {

  const [scrollEnabled, setScrollEnabled] = useState(false);
  const [elapsedMilliseconds, setElapsedMilliseconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [startTime, setStartTime] = useState(false);
  const [stopTime, setStopTime] = useState(false);
  const [isReset, setIsReset] = useState(true);

  const start = () => {
    console.log("START");
    // stuff
  };

  const reset = () => {
    console.log("RESET");
    // stuff
  };

  const stop = () => {
    console.log("STOP");
    // stuff
  };

  const pause = () => {};

  return (
    <View style={styles.container}>
        <StartStopButtons
          start={start}
          stop={stop}
          reset={reset}
          pause={pause}
          isRunning={isRunning}
          isReset={isReset}
          elapsedMilliseconds={elapsedMilliseconds}
        />
    </View>
  );
};

并像

一样使用它们

//imports....

export const StartStopButtons = ({
  start,
  stop,
  reset,
  pause,
  isRunning,
  isReset,
  elapsedMilliseconds,
}) => {
  if (isRunning && isReset === false) {
    return (
      <View>
        <TouchableOpacity onPress={stop}>
          <Text>Stop</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={pause}>
          <Text>Pause</Text>
        </TouchableOpacity>
      </View>
    );
  } else {
    if (elapsedMilliseconds === 0) {
      return (
        <TouchableOpacity onPress={start}>
          <Text>Start</Text>
        </TouchableOpacity>
      );
    } else {
      return (
        <TouchableOpacity onPress={reset}>
          <Text>Reset</Text>
        </TouchableOpacity>
      );
    }
  }
};

从组件调用主文件中的函数

Calling function in main file from component

react-native

react-functional-component