React中如何跨组件通过按钮触发另一组件内部方法？

你当前的Timer和Start组件属于同层级兄弟组件，共享挂载在App组件下，最直接的实现方式是做状态提升，将计时器的核心状态和控制方法统一放在共同父组件App中维护，再通过props按需下发给各个子组件即可，不需要额外引入依赖。

第一步：重构App.js，上移计时器核心逻辑 #

将原本写在Timer组件内的useStopwatch调用移到App组件中，把时间状态传给Timer做展示，把控制方法传给对应需要触发操作的路由组件：

import { useStopwatch } from 'react-timer-hook';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Timer from './Timer';
import Start from './Start';
// 引入其他业务页面组件

function App() {
  // 计时器实例统一在父层维护，所有子组件可共享状态和方法
  const {
    seconds,
    minutes,
    start,
    pause,
  } = useStopwatch({ onExpire: () => console.warn('onExpire called') });

  return (
    <Router>
      <div className="App">
        {/* 下发时间状态给全局展示的Timer组件 */}
        <Timer minutes={minutes} seconds={seconds} />
        <Routes>
            {/* 下发start方法给首页的Start组件 */}
            <Route path="/" element={ <Start startTimer={start} /> }></Route>
            {/* 后续结果页直接传入pause方法即可，示例：
            <Route path="/result" element={ <Result pauseTimer={pause} /> } />
            */}
            {/* 其余路由配置 */}
        </Routes>
      </div>
    </Router>
  );
}

export default App;

第二步：精简Timer.js，仅保留时间展示能力 #

移除Timer组件内部的useStopwatch调用和内置的开始/暂停按钮，只接收父组件传入的时间值做渲染即可。

注意：你当前Timer.js文件末尾错误导出了一个同名App组件，重构时直接删除这部分冗余代码，避免组件引用冲突。

export default function Timer({ minutes, seconds }) {
  return (
    <div className="timer">
      <div className='timer-inside' >
        <span>{minutes < 10 ? '0' + minutes : minutes}</span>:<span>{seconds < 10 ? '0' + seconds : seconds}</span>
      </div>
    </div>
  );
}

第三步：改造Start.js，绑定触发方法 #

Start组件接收父组件传入的startTimer方法，绑定到自身页面的按钮点击事件上即可触发计时器启动：

export default function Start({ startTimer }) {
  return (
    <div className="start-page">
      {/* 页面其余业务内容 */}
      <button onClick={startTimer}>开始计时</button>
    </div>
  );
}

后续扩展参考 #

如果后续项目组件嵌套层级变深，逐层传props的维护成本变高，可以选择以下方案优化：

• 使用React自带的Context API封装计时器全局状态，所有组件可直接通过useContext获取控制方法，无需逐层传参
• 如果项目本身已经接入Redux、Zustand等全局状态管理库，也可以将计时器状态纳入全局store统一管理，不建议为了这个功能单独引入第三方状态库

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