React-从父/同级组件触发子方法的最佳方法

Question

我是React的新手，也许我的逻辑有些混乱： 我有游戏组件，它有2个孩子：棋盘和计时器。

委员会有一个按钮可以开始游戏。当我开始游戏时，我想启动计时器。有一种方法可以从 Board 直接调用该函数来启动计时器？ 我试图从 Game 向 Board 发送一个函数，该函数更改了 Game 中的某些状态，但我不知道如何触发计时器的startStopTime（）（我的想法是使用useEffect（），但我不知道是否有更简单的方法）

感谢您的帮助

Game.jsx

function Game(){

 return(
   <div>
      <Board>
      <Timer>
   </div>
 )
}

Board.jsx

function Board(){
  /* logic game*/
  return (
   <Button>Start game</button>
 )
}

timer.jsx

function Timer(){
  /* methods timer*/
  function startStopTime{ /* code*/}
  function resetTimer{ /* code*/}

  return (
   <div>{timeRunningGame}</div>
 )
}

Answer 1

我认为您在使用Timer中的效果方面正处于正确的轨道上。

这是一个实现，其他存在。

Timer.jsx

const Timer = ({ isRunning, onReset }) => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = isRunning
      // if true, start timer
      ? setInterval(() => setTime(t => t + 0.1), 100)
      // else reset time back to 0
      : setTime(0);

    // provide cleanup function
    return () => clearInterval(timer);
  }, [isRunning]);

  return (
    <>
      <div>{Number(time).toFixed(1)}</div>
      {isRunning && (
        <button type="button" onClick={onReset}>
          Reset
        </button>
      )}
    </>
  );
};

Board.jsx具有onStartGame回调函数

const Board = ({ onStartGame }) => {
  /* game logic */
  return (
    <button type="button" onClick={onStartGame}>
      Start Game
    </button>
  );
};

Game.jsx管理计时器的启动和传递状态

const Game = () => {
  const [isRunning, setIsRunning] = useState(false);
  const runTimer = run => () => setIsRunning(run);

  return (
    <>
      <Board onStartGame={runTimer(true)} />
      <Timer isRunning={isRunning} onReset={runTimer(false)} />
    </>
  );
};