我如何将这个react组件设置为使用钩子的dat组件？

Question

我想将此反应组件设为不应该使用扩展组件。所以我想为此使用react钩子。我做了很多尝试，但是我一直遇到问题。有人可以帮我吗？

import React from "react";
import DateRangePicker from "react-daterange-picker";
import "react-daterange-picker/dist/css/react-calendar.css";
import originalMoment from "moment";
import { extendMoment } from "moment-range";
const moment = extendMoment(originalMoment);

class DatePicker extends React.Component {
  constructor(props, context) {
    super(props, context);
    const today = moment();
    this.state = {
      value: moment.range(today.clone(), today.clone())
    };
  }
  onSelect = (value, states) => {
    this.setState({ value, states });
  };

  renderSelectionValue = () => {
    return (
      <div>
        {this.state.value.start.format("DD-MM-YYYY")}
        {" - "}
        {this.state.value.end.format("DD-MM-YYYY")}
      </div>
    );
  };

  stateDefinitions = {
    available: {
      color: null,
      label: 'Beschikbaar',
    },
    unavailable: {
      selectable: false,
      color: '#78818b',
      label: 'Gereserveerd',
    },
  };

  dateRanges = [
    {
      state: 'unavailable',
      range: moment.range(new Date(2020, 6, 20), new Date(2020, 6, 23)),
    },
  ];

  render() {
    return (
      <div>
          <DateRangePicker
            value={this.state.value}
            onSelect={this.onSelect}
            singleDateRange={true}
            numberOfCalendars={2}
            selectionType='range'
            minimumDate={new Date()}
            showLegend={true}
            stateDefinitions={this.stateDefinitions}
            dateStates={this.dateRanges}
            defaultState="available"
            locale={moment().locale('nl')}
            firstOfWeek={1}
            />
          <div>{this.renderSelectionValue()}</div>
      </div>
    );
  }
}

export default DatePicker;

[谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！ ！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！谢谢！

Answer 1

解决方案很简单，您需要重写代码，但就像功能组件一样。

通过函数名称替换类名称，通过useEffect等替换您的生命周期...

我告诉你可以尝试一下，因为一段时间内我遇到了相同的错误，并且我切换到功能组件，并且可以正常工作：）

玩得开心^^