React JS中将函数组件转换为类组件时出现报错如何解决

错误原因汇总 #

你编写的类组件存在以下语法、逻辑层面的问题：

• 缺少类组件的基础声明结构：未使用class 组件名 extends React.Component包裹整体逻辑，直接编写constructor、render等方法属于语法错误
• this指向丢失问题：changeDate自定义方法作为回调传递给子组件时，没有绑定当前组件实例的this，触发回调时访问this.setState会抛出undefined错误
• 渲染逻辑位置错误：JSX的return语句写在了render()方法外部，类组件要求所有UI返回逻辑必须放在render方法内部
• state取值错误：给Calendar组件传递value属性时直接写了this.dateState，类组件所有存在state里的值必须从this.state对象下读取，正确写法为this.state.dateState
• 零散变量位置非法：clikededate变量直接声明在类的根作用域下，不符合类的语法规范，可按需放在render方法内部或者作为实例属性处理
• 结构闭合问题：constructor、changeDate等方法缺少闭合的花括号，存在基础语法错误

另外你提供的原函数组件也存在笔误：clikededate变量声明行末尾多写了一个闭合花括号，会导致后面的return语句被阻断，属于语法错误。

正确转换后的类组件实现 #

import React from 'react';
// 记得导入你用到的Calendar组件和moment库
import Calendar from '你对应的Calendar组件路径';
import moment from 'moment';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateState: new Date(),
    };
  }

  // 用箭头函数定义方法，自动绑定当前实例的this，避免指向丢失
  changeDate = (e) => {
    this.setState({ dateState: e });
  }

  render() {
    // 用到的clikededate变量放在render内部声明即可
    let clikededate = moment(this.state.dateState).format('MMMM Do YYYY');
    // 所有UI返回逻辑放在render的return里
    return (
      <>
        <Calendar 
          value={this.state.dateState}
          onChange={this.changeDate}
        />
      </>
    )
  }
}

内容的提问来源于stack exchange，提问作者vivek kn