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;

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

2 个答案: