如何在React中使用其他组件中使用按钮的组件中访问组件中的功能？

Question

我正在使用 react-timer-hook 为我的React设置了一个秒表应用。因此，我得到了一个Timer.js文件，此秒表正在使用一个开始和暂停按钮。我在app.js中调用组件，以便计时器显示在所有页面上。我的下一步是在名为start.js的不同组件中设置该启动功能（在最后页面中的暂停），但我不知道如何将其传递给该组件。

这是我的app.js：

function App() {
  return (
    <Router>
      <div className="App">
        <Timer/>
        <Routes>
            <Route path="/" element={ <Start /> }></Route>
            // Other routes
        </Routes>
      </div>
    </Router>
  );
}

export default App;

timer.js file：

function MyTimer({ expiryTimestamp }) {
  const {
    seconds,
    minutes,
    start,
    pause,
  } = useStopwatch({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });


  return (
    <div className="timer">
      <div className='timer-inside' >
        <span>{minutes < '10' ? '0' + minutes : minutes}</span>:<span>{seconds < '10' ? '0' + seconds : seconds}</span>
      </div>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <MyTimer/>
    </div>
  );
}

因此，基本上我想要＆lt; button onclick = {start}＆gt; start＆lt;/button＆gt; sippet摘要在名为start.js，而不是the Timer.js本身。

Answer 1

如果要渲染起始组件作为计时器的孩子，则可以传递从UseStopWatch挂钩类似

<Start onClick={start} />

开始

<button onClick={onClick}>Start</button>

的开始功能，但是，如果您想在应用程序上渲染它，则需要在应用程序上调用挂钩pass what you need on the components you need:

function App() {
  const timer = useStopwatch({ onExpire: () => console.warn('onExpire called') });

  return (
    <Router>
      <div className="App">
        <Timer data={timer} />
        <Routes>
            <Route path="/" element={ <Start data={timer} /> } />
            // Other routes
        </Routes>
      </div>
    </Router>
  );
}

export default App;

So in both components will have same data property.

希望它有帮助！