我正在尝试将此React类组件更改为功能组件

Question

我想这样做的原因是，我习惯了函数组件，而我的其余代码都是用函数组件编写的，所以我想保持这种方式。我实际上从来没有学习过类组件(我还是个编程新手)，我们只是开始使用函数组件，可能是因为React Hooks，虽然我在网上读过一些东西，但我很难尝试转换它。这是我试图转换的代码：

​

import React, { Component } from 'react';
import Calendar from 'react-calendar';
 
class MyApp extends Component {
  state = {
    date: new Date(),
  }
 
  onChange = date => this.setState({ date })
 
  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
        />
      </div>
    );
  }
}

export default Calendar;

我只设法将其中的一部分转换为如下所示的功能组件：

​

​

import React {useState} from "react";

import Calendar from "react-calendar";

export default function Calendar () {
    const[date, setDate] = useState({date: new Date()})

我甚至不确定我开始的是不是正确的，但这就是我到目前为止关于转换的全部。我不知道如何转换剩下的。

​

Answer 1

import React, { useState } from 'react';
import Calendar from 'react-calendar';

export default () => {
  const[date, setDate] = useState({date: new Date()});
  return (
    <div>
      <Calendar
        onChange={date => setDate({ date })}
        value={date}
      />
    </div>
  );
}

Answer 2

import React, { useState} from 'react';
import Calendar from 'react-calendar';

 const Calendar = () => {
 const[date, setDate] = useState({new Date()});

  onChange = date => setDate(date);

  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={date}
        />
      </div>
    );
  }
}

export default Calendar;