Реагировать на преобразование класса в функции

Question

В настоящее время у меня есть таймер, который работает с классом, но мне нужно использовать только функции, чтобы он работал с файлом App.js, который я запускаю, чтобы показать, что мне нужно.Вот пример того, как я бы назвал свой файл из приложения:

return (
<div>


  <h1>Example Timer</h1>
  <h2>Other files have been removed for example purposes</h2>

  <Timer onClick ={this.startTimer} />
</div>

)

А вот мой класс Timer, который необходимо преобразовать в функции, чтобы я мог экспортировать его следующим образом:

export default function Timer(onClick)

Вот весь компонент класса для таймера

import React from 'react';
import "./timer.css";


class Timer extends React.Component{

constructor(){
    super();
    this.state = { time: {}, seconds: 5, color: 'darkgrey'};
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.startCountDown = this.startCountDown.bind(this);

    }

convertToSeconds(sec){
let divisor_for_minutes = sec % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);

let divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);

var obj = {"m": minutes, "s": seconds};
return obj;
}

componentDidMount() {
    let timeLeftVar = this.convertToSeconds(this.state.seconds);
    this.setState({ time: timeLeftVar });
  }

startTimer(){
// If timer is not set, set the interval

if(this.timer === 0 && this.state.seconds > 0){
    // 1000 ms = 1 second
    this.timer = setInterval(this.startCountDown, 1000);

}
}

startCountDown() {
        let seconds = this.state.seconds - 1;
        if(seconds >= 0){
          if(seconds<=2){
            this.setState({color: 'red'})
          }
        this.setState({
            time: this.convertToSeconds(seconds),
            seconds: seconds
        });
      }
    else{
        this.setState({time: this.convertToSeconds(5), seconds: 5, color: 'darkgrey'});
        clearInterval(this.timer);
        this.timer = 0;
    }

}

render(){
    return(
  <div className="component-timer">

    <div class="startbtn">
        <button onClick={this.startTimer}>Start</button>
    </div>

      <div class="timer"><div style = {{color: this.state.color}}>
        m: {this.state.time.m} s: {this.state.time.s}
      </div>
  </div>

  </div>
    );
    }
}


export default Timer;

Answer 1

Это построчное преобразование компонента класса в компонент функции с использованием обработчиков реакции ... (Вам нужна версия реакции выше, чем 16.8.x https://reactjs.org/docs/hooks-intro.html)

import React, { useState, useEffect } from 'react';
import './timer.css';

export default function Timer() {
  const [seconds, setSeconds] = useState(5);
  const [time, setTime] = useState({});
  const [color, setColor] = useState('darkgrey');
  const [timer, setTimer] = useState(0);

  //only executes when component mounts by passing "[]".
  useEffect(() => {
    setTime(convertToSeconds(seconds));
  }, []);

  function convertToSeconds(sec) {
    let divisor_for_minutes = sec % (60 * 60);
    var minutes = Math.floor(divisor_for_minutes / 60);

    let divisor_for_seconds = divisor_for_minutes % 60;
    var seconds = Math.ceil(divisor_for_seconds);

    var obj = { m: minutes, s: seconds };
    return obj;
  }

  function startTimer() {
    // If timer is not set, set the interval

    if (timer === 0 && seconds > 0) {
      // 1000 ms = 1 second
      setTimer(setInterval(startCountDown, 1000));
    }
  }

  function startCountDown() {
    let _seconds = seconds - 1;
    if (_seconds >= 0) {
      if (_seconds <= 2) {
        setColor('red');
      }
      setTime(convertToSeconds(_seconds));
      setSeconds(_seconds);
    } else {
      setTime(convertToSeconds(5));
      setSeconds(5);
      setColor('darkgrey');
      clearInterval(timer);
      setTimer(0);
    }
  }
  return (
    <div className="component-timer">
      <div className="startbtn">
        <button onClick={startTimer}>Start</button>
      </div>

      <div className="timer">
        <div style={{ color: color }}>
          m: {time.m} s: {time.s}
        </div>
      </div>
    </div>
  );
}

Answer 2

Вам не нужна функция для работы, вы можете использовать компонент класса и использовать его для визуализации непосредственно в index.js или в любом месте, где вы хотите отрендерить

Код выглядит примерно так

import React from 'react';
import ReactDOM from 'react-dom';
import Timer from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <div>
  <h1>Example Timer</h1>
  <h2>Other files have been removed for example purposes</h2>
  <Timer />
  </div>
  , document.getElementById('root'));
registerServiceWorker();

Answer 3

С новой версией реакции мы можем использовать Hook useState, и он будет выглядеть так:

import React, { useState } from 'react';
import "./timer.css";

const convertToSeconds = (sec) => {
  let divisor_for_minutes = sec % (60 * 60);
  var minutes = Math.floor(divisor_for_minutes / 60);

  let divisor_for_seconds = divisor_for_minutes % 60;
  var seconds = Math.ceil(divisor_for_seconds);

  var obj = {"m": minutes, "s": seconds};
  return obj;
}

const Timer= () => {
  const [seconds, setSeconds] = useState(5)
  const [time, setTime] = useState(convertToSeconds(seconds))
  const [color, setColor] = useState('darkgrey')
  const [timer, setTimer] = useState(0)


  const startTimer = () => {
    // If timer is not set, set the interval
    if(timer === 0 && seconds > 0){
        // 1000 ms = 1 second
        setTimer(setInterval(startCountDown, 1000))
    }
  }

  const startCountDown = () => {
        let newSeconds = seconds - 1;
        if(newSeconds >= 0){
          if(newSeconds<=2){
            setColor('red')
          }
            setTime(convertToSeconds(newSeconds))
            setSeconds(newSeconds)
      }
    else{
        setTime(convertToSeconds(5))
        setSeconds(5)
        setColor('darkgrey')
        setTimer(0)
    }
  }

  return(
    <div className="component-timer">
      <div class="startbtn">
          <button onClick={startTimer}>Start</button>
      </div>

        <div class="timer"><div style = {{color}}>
          m: {time.m} s: {time.s}
        </div>
      </div>
    </div>
  )   
}

export default Timer