将道具传递给 ReactJS 中的组件

Question

I want to pass a variable from here:

let second = 0;

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

setInterval(timer, 1000);

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

This should return the seconds which are generated by the function timer . In console log i got the result, but how to pass the seconds from the function to <div className="timer">{i want to pass here the seconds}</div> ? I tried to write <div className="timer">{timer()}</div> , but it doesn't work. How to solve the issue?

Answer 1

I don't know your development environment, but the following should be a working component that does what you want.

There are many things that may be considered bad practices in your code, beside the fact that, as you said, it doesn't work. I would suggest you to take the time to read at least once the ReactJS documentation.

I don't even know if you know what State is, but in case you do, you're writing a functional component so you need to use Hooks to use the 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;