將道具傳遞給 ReactJS 中的組件

Question

我想從這里傳遞一個變量：

let second = 0;

function timer() {
  let res = second++;
  console.log(res);
}

setInterval(timer, 1000);

function App() {
  return (
      <div>
        <div className="timer">{timer()}</div>
      </div>
  );
}

這應該返回由 function timer生成的秒數。 在控制台日志中，我得到了結果，但是如何將秒從 function 傳遞到<div className="timer">{i want to pass here the seconds}</div> ？ 我試圖寫<div className="timer">{timer()}</div> ，但它不起作用。 如何解決問題？

Answer 1

我不知道您的開發環境，但以下應該是一個可以滿足您需求的工作組件。

除了正如您所說的那樣，它不起作用之外，您的代碼中有很多東西可能被認為是不好的做法。 我建議您花時間至少閱讀一次 ReactJS 文檔。

我什至不知道你是否知道 State 是什么，但如果你知道，你正在編寫一個功能組件，所以你需要使用 Hooks 來使用 State。

import React, {useState, useRef} from 'react';

function Timer() {

    const interval = useRef(null);
    const [seconds, setSeconds] = useState(0);

    return (
        <div>
            <div className="timer">{seconds}</div>

            <button onClick={() => {
                interval.current = setInterval(() => {
                    setSeconds(seconds + 1);
                }, 1000);
            }}>START</button>

            <button onClick={() => {
                clearInterval(interval.current);
                interval.current = null;
                setSeconds(0);
            }}>CLEAR</button>

        </div>
    );

}

export default Timer;