如何将使用React Hooks的函数组件转换为React类组件

以下是转换完成的React类组件代码，修复了原Hooks代码中存在的传参索引错位问题，可直接运行：

import React, { Component } from 'react';
// 注意保持和原函数组件一致的依赖引入：图标组件、data数据源、Model弹窗组件
// import { FaArrowUp, FaRegCommentAlt, FaRegEye } from 'react-icons/fa';
// import { data } from '你的数据源路径';
// import Model from '你的Model组件路径';

class Card extends Component {
  // 初始化状态，对应原两个useState声明
  state = {
    model: false,
    tempData: []
  }

  // 卡片点击处理方法，用箭头函数写法绑定this，避免指向错误
  getData = (img, title, desc, votes, comments, views) => {
    // 修正原代码无意义的头部1占位、索引错位问题，直接按顺序存储弹窗需要的数据
    const tempData = [img, title, desc, votes, comments, views];
    this.setState({
      tempData: tempData,
      model: true
    })
  }

  // 弹窗关闭方法
  hideModal = () => {
    this.setState({
      model: false
    })
  }

  render() {
    const { model, tempData } = this.state;
    return (
      <>
        <section className='py-4 py-lg-5 container'>
          <div className='row justify-content-center align-item-center'>
            {data.cardData.map((item, index) => {
              return(
                <div 
                  className='col-11 col-md-6 col-lg-3 mx-0 mb-4' 
                  key={index} 
                  onClick={() => this.getData(item.imgSrc, item.title, item.desc, item.votes, item.comments, item.views)}
                >
                  <div className="card p-0 over-flow-hidden h-100 shadow bg-transparent">
                    <img className="card-img-top" src={item.imgSrc} alt=""></img>
                    <div className="card-body bg-dark">
                      <small className="text-white">{item.title}</small>
                      <small className="text-muted card-detail">
                        <small className='text-muted'><FaArrowUp className='card_icons'/>{item.votes}</small>
                        <small className='text-muted'><FaRegCommentAlt className='card_icons card_icon2' />{item.comments}</small>
                        <small className='text-muted'><FaRegEye className='card_icons card_icon3' />{item.views}</small>
                      </small>
                    </div>          
                  </div>
                </div>
              )
            })}
          </div>
        </section>
        {
          model ? (
            <Model 
              img={tempData[0]} 
              title={tempData[1]} 
              desc={tempData[2]} 
              votes={tempData[3]} 
              comments={tempData[4]} 
              views={tempData[5]} 
              hide={this.hideModal} 
            />
          ) : null
        }
      </>
    )
  }
}

export default Card;

转换常见踩坑点（自行转换无法运行通常是以下原因） #

• this指向错误：类组件的方法如果用普通函数写法，不做bind绑定的话，事件触发时this为undefined，无法调用this.setState，推荐直接用类属性箭头函数写法规避这个问题
• 状态/方法取值错误：类组件的状态存在this.state对象上，自定义方法挂载在组件实例this上，不能像函数组件那样直接写变量名调用
• 原代码自带bug：原Hooks实现中setTempdata会在数组头部插入一个无意义的数字1，且传给Model组件的views属性错取了comments位置的值，上述代码已修复该问题，如果需要完全对齐原逻辑的错误行为，可以自行调整数组索引
• 依赖遗漏：类组件和函数组件一样，需要在文件头部正常引入用到的图标组件、数据源、子组件，否则会报引用错误

内容的提问来源于stack exchange，提问作者Rahul Rajput