如何将React函数式组件CalendarCreateModal转换为类组件

转换后的完整代码如下：

import React from 'react';

// 静态常量可保留在组件外，也可定义为类的静态属性
const ModalData = [
  { name: "Reminders", src: CalendarCreate2, action: "Reminders" },
  { name: "Events", src: CalendarCreate3, action: "Events" },
  { name: "Programs", src: CalendarCreate4, action: "Programs" }
];

class CalendarCreateModal extends React.PureComponent {
  constructor(props) {
    super(props);
    // 替换原useState声明的响应式状态
    this.state = {
      openModal: ""
    };
  }

  // 箭头函数类属性自动绑定this，无需额外在constructor中手动绑定
  onSubmitClick = (event) => {
    const { openModal } = this.state;
    const { history, openRemindersModal, onClose } = this.props;

    if (openModal === "Events") {
      history.push("/partners/events/list");
    }
    if (openModal === "Programs") {
      history.push("/partners/programs/list");
    }
    if (openModal === "Reminders") {
      openRemindersModal(true);
      onClose();
    }
  };

  render() {
    // 原函数组件return的JSX内容直接放在此处即可
    // 原状态更新逻辑setOpenModal(xxx)统一替换为this.setState({openModal: xxx})
    return (
      ........
    )
  }
}

export default CalendarCreateModal;

核心转换规则说明 #

• 状态管理：useState声明的所有状态全部迁移到constructor的this.state对象中，状态更新调用this.setState方法实现
• 参数获取：函数组件的入参props，类组件统一从this.props中读取使用
• 方法绑定：自定义事件方法建议用箭头函数类属性写法，避免this指向异常
• 渲染逻辑：原函数组件返回的JSX代码，全部迁移到类组件的render()方法的return中即可

内容的提问来源于stack exchange，提问作者Dave Smith