将道具传递给 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;