Question

我有一个类组件，我想将其转换为功能组件。但我不知道该如何工作：

我的班级组成部分：

import moment from 'moment';
import Data from '../data';
import nextTime from '../next-time;

class TimesSingleView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Times: this.getTimes(),
      tomorrowsTimes: this.getTomorrowsTimes(),
    };
  }

  getTimes() {
    var _data = new Data();
    return _data.getTimes();
  }

  getTomorrowsTimes() {
    var date = moment()
      .add(1, 'days')
      .format('DD/MM/YYYY');
    var _data = new Data();
    return _data.getTimes(date);
  }

Answer 1

您应该看看钩子https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks

Answer 2

这就是我如何设置显示为功能组件的内容。我使用useMemo是因为您没有对状态值进行任何修改，但是您可以轻松地切换到useState。

import React, { useMemo } from 'react';
import moment from 'moment';
import Data from '../data';
import nextTime from '../next-time;


const TimesSingleView = ()=>{
  const times = useMemo(()=>getTimes());
  const tomorrowsTimes = useMemo(()=>getTomorrowsTimes());
  // If you need to make changes to the times/ tomorrowsTimes, use them as state instead
  // const [times,setTimes] = useState(()=>getTimes());

}

function getTimes(){
  const data = new Data();
  return data.getTimes();
}

function getTomorrowsTimes() {
  const date = moment()
    .add(1, 'days')
    .format('DD/MM/YYYY');
  const _data = new Data();
  return _data.getTimes(date);
}

将React类组件转换为功能组件

2 个答案: