javascript - 如何从 React 组件中的另一个文件调用函数

Question

我想从 React 组件调用一个函数。此函数将调用调用它的组件中的另一个函数。

我的组件:

import React, { useState } from "react";

// import turnOnGreenLight from "./green.js"; // <-- I want to import this

export const initialLightValues = ["unactive", "unactive"];
export let setLightsVar = initialLightValues;

function App() {

  const [lights, setLights] = useState(initialLightValues);

  function turnOnRedLight() {
    setLightsVar[0] = "active";
    updateLightsState();
    turnOnGreenLight();
  }

  // I want to move this function "turnOnGreenLight" in the file green.js
  function turnOnGreenLight() {
    setLightsVar[1] = "active";
    updateLightsState();
  }

  function updateLightsState() {
    setLightsVar = setLightsVar.slice();
    setLights(setLightsVar);
  }

  return (
    <div className="App">
      <button onClick={() => turnOnRedLight()}>Turn on the lights</button>
      <br />
      <div className={"red-light " + lights[0]}>Red</div>
      <div className={"green-light " + lights[1]}>Green</div>
    </div>
  )
}

export default App

green.js 文件中的函数如下所示:

import { setLightsVar, updateLightsState } from "./App";

function turnOnGreenLight() {
  setLightsVar[1] = "active";
  updateLightsState();
}

export default turnOnGreenLight;

我不确定我正在尝试做的事情是否可行。

Answer 1

这是可能的，但你会收到循环模块警告，如果你将运行 jest 测试，它会抛出异常，所以如果你想这样做，最好将函数 updateLightsState 作为回调参数传递 - 那么没问题

function turnOnGreenLight(callback) {
  setLightsVar[1] = "active";
  callback();
}

turnOnGreenLight(updateLightsState)